如何在Bootstrap 5中实现屏幕尺寸变化时反转列的堆叠顺序

算力阿峰

2026-4-28

解决Bootstrap列堆叠顺序反转的问题

这问题我太熟了！用Bootstrap自带的响应式flex工具类就能轻松搞定，完全不用额外写CSS。核心就是利用**order-*系列类**来控制不同屏幕尺寸下的列排列顺序。

思路拆解

Bootstrap的.row默认是flex容器，里面的列都是flex项。order-*类可以调整flex项的排列优先级，数字越小，排列越靠前。我们的需求是：

在**桌面端（md及以上屏幕）**保持原顺序：Col A 左，Col B 右
在**移动端（sm及以下屏幕）**反转顺序：Col B 在上，Col A 在下

修改后的代码

最简单的写法是这样的，只给列加响应式的order类即可：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-sm-12 order-sm-2">
      <p>A</p>
    </div>
    <div class="col-md-4 col-sm-12 order-sm-1">
      <p>B</p>
    </div>
  </div>
</div>

类名解释

order-sm-2：在sm及更小的屏幕（比如手机）上，把Col A的排列优先级设为2，会排在后面
order-sm-1：在sm及更小的屏幕上，把Col B的排列优先级设为1，会排在前面
至于md及以上的屏幕，因为我们没加order-md-*类，列会自动回到HTML里的默认顺序（Col A在前，Col B在后），完美符合你的需求！

如果想要更清晰（避免后续修改混淆），也可以显式加上桌面端的order类，效果完全一样：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-sm-12 order-sm-2 order-md-1">
      <p>A</p>
    </div>
    <div class="col-md-4 col-sm-12 order-sm-1 order-md-2">
      <p>B</p>
    </div>
  </div>
</div>