Bootstrap 4移动端元素顺序调整：第二个区块图文反转需求

没问题，这事儿用Bootstrap内置的响应式排序类就能完美解决。你要的是第二个区块在移动端（屏幕小于md尺寸）时文本排在图片前面，咱们只需要给对应的列加上order-*系列类就行：

修改后的完整代码 #

<div class="container">
  <div class="sub-title">
    <div>simpleTextDynamicIndoorNavigationTitle</div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div>text sample</div>
    </div>
    <div class="col-md-6">
      <img src="assets/img/img1.png">
    </div>
  </div>
  <!-- 这里是需要调整的第二个区块 -->
  <div class="row">
    <!-- 图片列：md及以上保持第1位，移动端排第2位 -->
    <div class="col-md-6 order-2 order-md-1">
      <img src="assets/img/img2.png">
    </div>
    <!-- 文本列：md及以上保持第2位，移动端排第1位 -->
    <div class="col-md-6 order-1 order-md-2">
      <div>text sample</div>
    </div>
  </div>
  <div class="sub-title" id="use-cases-title">
    <div>simpleTextUseCasesTitle</div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div>text sample</div>
    </div>
    <div class="col-md-6">
      <img src="assets/img/img3.png">
    </div>
  </div>
</div>

原理说明 #

• order-1和order-2是针对**移动端（xs、sm尺寸，也就是屏幕宽度<768px）**的排序规则：数字越小，元素在布局里越靠前，所以文本列加order-1就会排在图片列的order-2前面。
• order-md-1和order-md-2是针对**md及以上尺寸（屏幕宽度≥768px）**的排序规则，这和你原来的布局顺序一致，保证桌面端还是图片在左、文本在右。

这样调整后，就能同时满足桌面端和移动端的不同布局需求啦～

内容的提问来源于stack exchange，提问作者Ferdaous Ben Salha