Bootstrap Equal Height Cols

by b9chris

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7" id=one>Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5" id=two>Test</div>
</div>

CSS

@media (min-width: 768px) {
    div.equal-height-sm {
        display: table;
        width: 100%;
    }

    div.equal-height-sm > div[class^='col-'] {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
}

#one { background: #8f8; }
#two { background: #8cf; }