Как задать колонки одинаковой высоты Bootstrap?

Question

[Максим]

Колонки в бутстрап на разных мониторах выходят в разную высоту.
С одной стороны блок с картинкой, с другой стороны блок с текстом и фоном. Как сделать так, что бы на всех мониторах было в одну высоту, так как картинки стоят по ширине ровно на пол экрана, соответственно и второй блок тоже, но высота блока с текстом - меньше.
Или есть способ задать колам высоту row?
Спасибо всем за помощь.

Answer 1

[Сергей delphinpro]

Флексами, Максим, флексами.

Answer 2

[Евгений]

@media only screen and (min-width : 768px) {
    .flex-row.row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row.row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
}

Answer 3

[Yustas Alexu]

.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

Answer 4

[Георгий Еремеев]

Варианты:

1. flexbox
   
2. js each
   
3. fix height