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

有一排图像

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

---

有什么方法可以做到这一点吗？

只要给他们两行一个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>    

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