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

Question

基本上我试图使用 Bootstrap 实现的是这样的(https://ibb.co/mBB9P6P)。当它调整到更小的屏幕时，它应该喜欢(https://ibb.co/0XnDy2S)。当然，对于我使用的代码，第二张图片位于第二段之后

我的想法是使用 Bootstrap 的先排序和后排序类来实现这一点，虽然它适用于移动设备，但在桌面上两张图片都在左边。我认为可行的是从不同媒体查询的 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 那么你将得到最多四个 cols。您可以在类属性中指定多个列格式。 https://getbootstrap.com/docs/4.0/layout/grid/希望这可以帮助。