Css 底部对齐3个响应div

我是这个网站的忠实追随者，这是我第一次找不到我想要的东西。我希望有人能尽快帮助我

我在一个响应容器分区内有3个分区。中间分区需要与底部垂直对齐。我如何做到这一点？请帮忙

CSS:

HTML:

机舱模型
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，ultricies nec

尝试将颜色更改为：

.col {
    display: table-cell;
    vertical-align:bottom;
    margin: 0 0 0 0;
}

---

您的HTML非常混乱，请使用缩进，以便清楚地显示div的打开和关闭位置。你能为我们创建一个JSFIDLE吗？这样我对你的问题有了更清晰的看法。我认为您可能需要在列上使用内联块并设置垂直对齐：底部；但我不确定。

<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>&nbsp; </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>

.col {
    display: table-cell;
    vertical-align:bottom;
    margin: 0 0 0 0;
}