Taming Bootstrap 3 - Columns Same Height

During my recent work on a web design layout with bootstrap, I came across a layout that required all bootstrap columns to be the same height. After some experimenting with various positions such as absolute inside relative etc. and none of them working as they should, I ended up using display: flex and wrapped it in a snippet as bellow.

@media (min-width: 992px) {
    .row-eq-height, .row-eq-height > div[class*='col-'] {
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
    }
}

Usage example and demo are shown here:

<div class="container">
    <div class="row row-eq-height">
        <div class="col-sm-4 col-1" style="background: red">
            Some Text
        </div>
        <div class="col-sm-4 col2" style="background: green"></div>
        <div class="col-sm-4 col3" style="background: blue"></div>
    </div>
</div>