Bootstrap 4列排序类失效：小屏未生效反而大屏生效

嘿，我帮你捋捋这个Bootstrap 4列排序的问题～你现在遇到的情况其实是踩了Bootstrap移动优先框架的小坑，咱们一步步解决：

问题根源 #

Bootstrap 4 是移动优先的框架，所有.order-*类的作用逻辑是：设置的断点及所有更大尺寸的屏幕都会应用这个排序。如果你只加了order-sm-*，那从sm（≥576px）到xl的大屏幕都会按这个规则排序，反而更小的xs屏幕（<576px）会保持原始列顺序——这正好和你想要的效果反过来了。

正确解决思路 #

要实现「小屏幕（sm及以下）重排，大屏幕保持原始顺序」，你需要做两步：

• 先给列设置小屏幕下的排序规则（用order-sm-*）
• 再给大屏幕（比如md及以上）设置回原始顺序，覆盖小屏幕的规则

示例代码 #

错误示例（就是你现在可能写的代码） #

<div class="container">
  <div class="row">
    <div class="col-sm-6 order-sm-2">列A（想在小屏幕排第二）</div>
    <div class="col-sm-6 order-sm-1">列B（想在小屏幕排第一）</div>
  </div>
</div>

这段代码会让sm到xl的屏幕都按「列A→列B」变成「列B→列A」，但xs小屏幕反而还是原始的「列A→列B」，完全不符合预期。

正确写法（两种方式） #

方式1：明确指定大屏幕的排序值

<div class="container">
  <div class="row">
    <!-- 小屏幕排第二，大屏幕回到原始的第一位置 -->
    <div class="col-sm-6 order-sm-2 order-md-1">列A</div>
    <!-- 小屏幕排第一，大屏幕回到原始的第二位置 -->
    <div class="col-sm-6 order-sm-1 order-md-2">列B</div>
  </div>
</div>

方式2：用默认值快速恢复

因为Bootstrap列的默认排序值是0，所以可以用order-md-0让大屏幕直接回到原始顺序，写法更简洁：

<div class="container">
  <div class="row">
    <div class="col-sm-6 order-sm-2 order-md-0">列A</div>
    <div class="col-sm-6 order-sm-1 order-md-0">列B</div>
  </div>
</div>

额外小技巧 #

如果你不想写数字，还可以用Bootstrap提供的快捷类：

• order-first 等同于 order-0（排在最前）
• order-last 等同于 order-12（排在最后）
  对应到大屏幕的话就是order-md-first、order-md-last，比如：

<div class="col-sm-6 order-sm-last order-md-first">列A</div>

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