Full height column bootstrap 3 - html

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;
}
}
}