<p>Bootstrap 4+ 用 order- 类替代已废弃的 pull/push 实现列排序，order 值越小越靠前，需配合断点前缀使用，默认 order: 0，仅改变视觉顺序不影响语义和 tab 顺序。</p>
Bootstrap列排序用 order- 类，不是 pull/push
bootstrap 4+ 完全废弃了旧版的 col-md-push-3 和 col-md-pull-9，改用 flexbox 的 order 属性实现列重排。如果你还在写 pull/push，页面不会报错但完全不生效——这是最常踩的兼容性坑。
-
order-后接数字（0–12），数值越小越靠前，负数也合法（如order--1） - 必须配合断点前缀使用，比如
order-2是全局生效，order-md-1只在中屏及以上起作用 - 所有列默认
order: 0，所以不用显式写order-0，写了反而冗余 - 如果只在某断点重排，其他断点没设
order，浏览器会按 HTML 源顺序回退——这点常被忽略，导致小屏错乱
怎么让「内容优先」又「视觉左栏导航」？
SEO 场景下，你希望 HTML 里先写正文（利于爬虫），但视觉上导航在左、内容在右。这时不能靠 DOM 移动，得靠 CSS 排序。
- 给导航列加
order-md-1，给正文列加order-md-2 - 小屏（
xs）下不设order，正文自然在上、导航在下，符合移动阅读流 - 别用
float或position: absolute强行覆盖，会破坏栅格的响应行为 - 注意：
order只改变视觉顺序，不影响语义结构和键盘 tab 顺序——可访问性需额外处理
order 值设多大才安全？
值本身没有硬性上限，但超出 12 容易引发维护混乱；更重要的是，它和 flex 容器的 flex-direction 绑定，而 Bootstrap 的 .row 默认是 flex-direction: row。
- 同一行内所有列共享一个 flex 容器，
order是它们之间的相对排序，不是绝对位置 - 设
order-5和order-10效果等同于order-0和order-5，只要差值一致，顺序就不变 - 避免跨行混用
order：不同.row是独立 flex 容器，彼此order值互不影响 - 调试时用浏览器 devtools 查看 computed
order值，比猜类名更可靠
为什么加了 order-md-1 还没变？
常见失效原因就三个：断点没匹配、父容器不是 flex、或被其他样式覆盖。
- 检查是否漏了
.row：只有.row（display: flex）下的子元素才响应order - 确认当前视口宽度匹配目标断点（比如
order-lg-1在中屏md下无效） - 检查是否有
!important的order内联样式或高权重 CSS 覆盖了 Bootstrap 类 - Bootstrap 5.3+ 支持
order-first/order-last简写，但老项目若用的是 4.x，这些类不存在
order 不是万能的——它只解决“这一行里谁先谁后”，如果需要跨行调度或复杂嵌套顺序，就得考虑重构 HTML 结构或用 JS 辅助，纯 CSS 有边界。 
