Question

有一排图像。

<div class="mainWrap">
<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-6">
      <img src="./img/1.png" alt="">
    </div>
    <div class="col-md-3 col-sm-6">
      <img src="./img/2.png" alt="">
    </div>
    <div class="col-md-3 col-sm-6">
      <img src="./img/3.png" alt="">
    </div>
    <div class="col-md-3 col-sm-6">
      <img src="./img/4.png" alt="">
    </div>
  </div>
</div>

因此，在小屏幕上看起来像：

1 2
3 4

但它需要像这样显示：

1 2
4 3

有没有办法做到这一点？

Answer 1

只需将它们分成两行col-sm-6： -

<div class="mainWrap">
<div class="container">
  <div class="row">
    <div class=" col-md-6 col-sm-6">
      <img src="./img/1.png" alt="">
    </div>
    <div class="col-md-6 col-sm-6">
      <img src="./img/2.png" alt="">
    </div>
   </div>
  <div class="row">
    <div class="col-md-6 col-sm-6">
      <img src="./img/4.png" alt="">
    </div>
    <div class="col-md-6 col-sm-6">
      <img src="./img3.png" alt="">
    </div>
   </div>
  </div>
</div>

如何更改行引导程序3中元素的顺序？

1 个答案: