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

Question

我需要在一列中显示图像(左侧)并在第二列(右侧列)中显示按钮(右侧列)和说明。我得到了预期的结果，但在移动 View 中，我需要在左下角和右侧显示按钮，图像应该放置。描述列应该在下一行。

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

在移动 View 中，按钮和图像应向下对齐。如图所示。

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% 宽度。

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