Как выровнять два деления одинаковой высоты и третьего деления в следующей строке

Question

Мне нужно отобразить изображение (слева) в одном столбце и отобразить кнопку (в правом столбце) и описание во втором столбце (в правом столбце). я получил результат, как и ожидалось, но в мобильном представлении мне нужно отобразить кнопку слева внизу и справа, изображение должно быть на месте. Столбец описания должен находиться в следующей строке.

<div class="row">
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-3 image-block">
        <img src="image.PNG" />
    </div>
    <div class="col-md-9 col-lg-9 col-sm-9 col-xs-9 button-block">
        <div class="category older-people">Button</div>
    </div>
    <div class="col-md-9 col-lg-9 col-sm-9 col-xs-12 text-block">
        <div class="address">Description Text Comes here</div>                                   
    </div>                                   
</div>

В мобильном режиме кнопка и изображение должны быть выровнены по направлению вниз. как показано на рисунке.

Answer 1

Если я правильно понимаю, нужно ли переупорядочивать свои элементы на мобильных устройствах?Я предлагаю вам использовать flexbox для него:

.row {
    display: flex;
    flex-direction: row;
}
.image-block {
    order: 2;
}
.button-block {
    order: 1;
}
.text-block {
    order: 3;
    flex-basis: 100%;
}

с flex-basis: 100%, вы заставляете элемент 100% ширины.

Это решение, которое вы ищете?