Bootstrap 3小屏幕下如何调整行内元素的显示顺序？

当然有可行的方法！Bootstrap 3内置了列排序工具，不用额外写复杂CSS就能轻松实现这个需求。

核心思路 #

利用Bootstrap 3的col-sm-push-*和col-sm-pull-*类，在小屏幕（sm尺寸，对应≥768px）下调整第3列和第4列的位置，同时不影响大屏幕（md及以上）的原有顺序。

修改后的代码 #

<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> 
      <!-- 给第3列添加push类，向右移动6个列宽 -->
      <div class="col-md-3 col-sm-6 col-sm-push-6"> 
        <img src="./img/3.png" alt=""> 
      </div> 
      <!-- 给第4列添加pull类，向左移动6个列宽 -->
      <div class="col-md-3 col-sm-6 col-sm-pull-6"> 
        <img src="./img/4.png" alt=""> 
      </div> 
    </div> 
  </div> 
</div>

原理说明 #

• Bootstrap 3的栅格系统基于12列布局，col-sm-6意味着在小屏幕下每个列占50%宽度（6/12）。
• col-sm-push-6会让目标列向右移动6个列的宽度（刚好是一个col-sm-6的宽度），col-sm-pull-6则让目标列向左移动6个列的宽度。
• 这两个类仅对sm及以下尺寸生效，在md及以上屏幕（≥992px），列会保持原有col-md-3的4列排列顺序，不会受到push/pull的影响。

这样修改后，小屏幕上的显示顺序就会变成1 2 4 3，完全符合你的需求。

内容的提问来源于stack exchange，提问作者backdooore3