Full height column bootstrap 3

Question

I'm trying to each this effect:

What I've developed till now: http://wedevelop.net63.net/j/

I can't manage to use bootstrap to stick the "RED" div to the footer.

Any tips? Here is the code:

<div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3">
                <div class="table-content-container row">
                <div class="main-content">
                    <h1>Take 10 off any purchase of 50 or more at Gamestop</h1>
                    <div class="row">
                        <div class="col-md-6"><img src="images/GameStop.png"/></div>
                        <div class="col-md-6"><span>Code:</span><span>play10</span></div>
                    </div>
                    <p>1. Enter the email you use on Jifity 2. Share this coupon on Facebook 3.          Your coupon is activated 4. Apply your savings to any gift</p>

                        <input class="center-block email-field form-control" type="text" value="Enter Your E-mail" />

                    <div class="row">
                    <div class="btn share-btn"></div>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-md-3"></div>
          </div>

<div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3">
                <div class="table-content-container row">
                    <div class="mobile-ad-content">
                        <h2>Ready to download your Coupon?</h2>
                        <p class="download-phrase">Download right now</p>
                        <div class="row stores-logos">
                            <div class="col-xs-6"><div class="btn btn-success right">Apple</div></div>
                            <div class="col-xs-6"><div class="btn btn-success">Google</div></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3"></div>
        </div>

LESS Code:

#content {
text-align: center;
height: 90%;
.table-content-container {
    display: table;
} 
.main-content {
    background: url('../images/content_whitebg.png') no-repeat;
    background-size: cover;
    display: table-cell;
    h1 {
        margin-left: 20%;
        margin-right: 20%;
        padding-top: 2em;
        font-size: 2em;
        margin-bottom: 1em;
    }
    .gamestop-logo {
        background: url('../images/GameStop.png') no-repeat;
    }
    p{
        padding-bottom: 1.2em;
        padding-top: 1.2em;
        font-size: 0.7em;
        margin-top: 2em;
    }

    .email-field {
        margin-bottom: 1.5em;
        width: 92%;
    }

    .share-btn {
        background: url('../images/share.png') no-repeat;
        width: 100px;
        height: 38px;
        margin-bottom: 2em;
    }
}

.mobile-ad-content {
    background: url('../images/content_redbg.png') no-repeat;
    background-size: cover;
    display: table-cell;
    color:white;
    text-align: center;

    h2 {
        padding-top: 2em;
        margin: 1em;
    }

    p{
        font-weight: bold;
    }

    .stores-logos {
        padding-bottom: 2em;
    }
}
    }