如何在小型设备中制作4个div之字形？

Question

我有4个div彼此相邻，并且在我的div里面有一些文字和图像。在桌面模式下，div彼此相邻，这正是我想要的，但是在较小的设备中，我希望我的4 div像之字形。我真的很难解决它。任何帮助将不胜感激。

<div class="row">
  <div class="col-md-3 col-sm-3 col-xs-6 width-50 fixedMobile">
    <div style="min-height:400px !important;" class="service-details text-center">
      <img alt="image" class="services-image" height="180" width="180" src="images/design.jpg">

      <h4><a href="services#Design">title</a></h4><br>
      <p>some text</p>
    </div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6 width-50 fixedMobile">
    <div style="min-height:400px !important;" class="service-details text-center">
      <img alt="image" class="services-image" height="180" width="180" src="images/maintenance.jpg">

      <h4><a href="services#Maintenance">title2</a></h4><br>
      <p>some text</p>
    </div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6 mt-25 fixedMobile">
    <div style="min-height:400px !important;" class="service-details text-center">
      <img alt="image" class="services-image" height="180" width="180" src="images/buil.jpg">
      <h4><a href="services#seo">title3</a></h4><br>
      <p>Some Text</p>
    </div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-6 mt-25 fixedMobile">
    <div style="min-height:400px !important;" class="service-details text-center">
      <img alt="image" class="services-image" height="180" width="180" src="images/managed.jpg">
      <h4><a href="#">Title</a></h4><br>
      <p>Test</p>
    </div>
  </div>
</div>