Fix/Align a Nested Row to the Bottom of it's Parent Column in Bootstrap 3

Question

Align/fix a nested row to the bottom of its parent column (col-md-x) in bootstrap 3 ?

Here is the bs3 result:

Here what I want:

The nested div.row should be affixed even to the bottom of the right-hand column

JSFiddle of current code

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <p>...</p>
            <div class="row">
                <div class="col-md-6">
                    <p>...</p>
                </div>
                <div class="col-md-6">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <p>...</p>
        </div>
    </div>
</div>

Answer 1

This can be achieved using a little extra CSS that brings flexbox-like functionality to bootstrap*

Edit your HTML by adding these two classes:

<div class="container">
    <div class="row row-eq-height"> <!--  add the .row-eq-height class -->
        <div class="col-md-9">
            <p>...</p>
            <div class="row bottom"> <!-- add the .bottom class -->
                <div class="col-md-6">
                    <p>...</p>
                </div>
                <div class="col-md-6">
                    <p>...</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <p>...</p>
        </div>
    </div>
</div>

The add these classes to your CSS:

.bottom {
    position: absolute;
    bottom: 0;
    margin-right: 0;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

DEMOS:

as coded in this answer

with added styling for clarity

Reference:

thanks acmetech

*the display flex property used to achieve this is only compatible back to IE9