如何在下一行对齐相同高度的两个div和第三个div

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％。

这是您正在寻找的解决方案吗？