bottom align 3 responsive divs - css

Question

I am a keen follower of this website and this is the first time I couldn't find what I was looking for. I hope someone can help me soon.
I have 3 divs inside a responsive container div. the middle div need to be vertically aligned to the bottom. How do I achieve that? Please help
CSS:
/* COLUMN LAYOUT GRID CSS */
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
.section img {
width: 100%;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 0 0 0 0;
}
#press-grid .col {
margin: 1% 0 1% 1.5%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* END OF GENERAL CSS */
/* GRID OF TWO */
#featured-slider {
}
#featured-right {
padding: 20px;
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.66%;
}
.span_1_of_3 {
width: 33.33%;
}
#press-grid .span_1_of_3 {
width: 31%;
background-color: white;
height: 500px;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 798px) {
.col {
margin: 1% 0 1% 0%;
}
}
#media only screen and (max-width: 798px) {
.span_1_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_3_of_3 {
width: 100%;
}
.featured-slider {
width: 100%;
}
#featured-right {
height: 150px;
}
}
/* END COLUMN LAYOUT GRID CSS */
HTML:
<div class="content-section" id="cabin-mockup">
<div class="container">
<div class="row">
<div class="section group">
<div class="col span_1_of_3 text-center" id="home-mockup-left">
<p> </p>
<p>
<i class="fa fa-paper-plane-o"></i>
</p>
<h3>Cabin Mockup</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
<img src="/template/images/mockup2.jpg" alt="Aircraft Cabin Mockup" />
</div>
<div class="col span_2_of_3 text-center" id="home-mockup-right">
<img src="/template/images/mockup.jpg" alt="Aircraft Cabin Mockup" />
</div>
</div>
</div>
</div>
</div>

Answer 1

Try changing col to this:
.col {
display: table-cell;
vertical-align:bottom;
margin: 0 0 0 0;
}