html - 更改不同屏幕上的列顺序

Question

基本上我想使用 bootstrap 实现的目标是这样的 (https://ibb.co/mBB9P6P)。当它调整到较小的屏幕时，它应该喜欢 (https://ibb.co/0XnDy2S)。当然，对于我正在使用的代码，会发生第二个图像位于第二段后面的情况

我的想法是使用 Bootstrap 的 order-first 和 order-last 类来实现此目的，虽然它适用于移动设备，但在桌面上两张图片都在左侧。我认为可行的是从不同媒体查询的 div 中删除一个类，但我不确定这是否是一个选项。

<div class="row">
        <div class="col-md-3">
          <img src="img1.png">
        </div>
        <div class="col-md-9">
          <p>Text</p>
        </div>
 </div>
<div class="row">
        <div class="col-md-9">
          <p>Text</p>
        </div>
        <div class="col-md-3">
          <img src="img1.png">
        </div>
</div>

Answer 1

Bootstrap 将屏幕划分为 12 列网格。如果您选择 md-3，那么您将得到最多 4 列的交叉。您可以在 class 属性中指定多种列格式。 https://getbootstrap.com/docs/4.0/layout/grid/希望这可以帮助。