Bootstrap Push/Pull实现三列小屏幕重排：1,2,3转为3,1,2

嘿，我来帮你搞定这个三列重排的问题！既然你已经会两列的实现，那三列的思路其实是类似的，只是要根据Bootstrap的版本调整策略——毕竟Bootstrap 3和4/5的栅格机制差异挺大的，我给你分两种情况讲：

方法一：Bootstrap 4/5（推荐，基于Flexbox） #

Bootstrap 4及以上用Flexbox实现栅格，直接用order-*类就能轻松控制不同屏幕下的排列顺序，不用调整HTML结构，非常直观。

假设你的原三列结构是：列1占6份（md-6）、列2占3份（md-3）、列3占3份（md-3），修改后的代码如下：

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <!-- 列1：小屏幕排第2，md及以上保持原顺序 -->
    <div class="col-md-6 order-2 order-md-1" style="background-color:lavender;">1</div>
    <!-- 列2：小屏幕排第3，md及以上保持原顺序 -->
    <div class="col-md-3 order-3 order-md-2" style="background-color:lightcyan;">2</div>
    <!-- 列3：小屏幕排第1，md及以上保持原顺序 -->
    <div class="col-md-3 order-1 order-md-3" style="background-color:lightgreen;">3</div>
  </div>
</div>

• order-1/order-2/order-3：控制**小屏幕（xs，默认<576px）**下的排列顺序，数字越小越靠前
• order-md-1/order-md-2/order-md-3：控制**md及以上屏幕（≥768px）**下的排列顺序，还原成你要的1、2、3

方法二：Bootstrap 3（基于浮动布局） #

如果你还在使用Bootstrap 3，就得靠col-md-push-*和col-md-pull-*来调整，而且需要先调整HTML的顺序（因为3的浮动布局是按HTML顺序渲染的）：

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <!-- 先写列3：小屏幕显示在最前面，md时推到最右边 -->
    <div class="col-md-3 col-md-push-9" style="background-color:lightgreen;">3</div>
    <!-- 再写列1：小屏幕排第2，md时拉回左边 -->
    <div class="col-md-6 col-md-pull-3" style="background-color:lavender;">1</div>
    <!-- 最后写列2：小屏幕排第3，md时拉到1的右边 -->
    <div class="col-md-3 col-md-pull-9" style="background-color:lightcyan;">2</div>
  </div>
</div>

• 原理：先把HTML顺序改成3、1、2（这样小屏幕堆叠时就是3、1、2），然后在md屏幕下用push/pull把它们拉回1、2、3的位置：
  • 列3：col-md-push-9 → 向右推9个栅格单位（6+3=9），刚好到最右边
  • 列1：col-md-pull-3 → 向左拉3个单位，填补列3原来的位置
  • 列2：col-md-pull-9 → 向左拉9个单位，刚好到列1的右边

这样两种方法都能实现你要的效果，根据你的Bootstrap版本选就行啦！

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