bootstrap 4 不支持 order-first，因其为 bootstrap 5.3+ 新增类；应改用 order-0 或 order-{bp}-n（如 order-md-1），并确保元素位于 .row 下且 display 为 flex。
为什么 order-first 在 Bootstrap 4 中不生效
因为 order-first 和 order-last 是 Bootstrap 5.3+ 新增的简写类，Bootstrap 4 完全没有定义它们。如果你在 4.x 项目里写了 order-first，浏览器会忽略——它既不是合法 CSS 属性值，也不是 Bootstrap 4 的预设类名。
常见错误现象：
- 开发者照着新文档抄了
order-first，但小屏/中屏顺序完全没变 - DevTools 里查不到对应样式，computed
order值仍是默认0 - 误以为是缓存或 CDN 问题，反复刷新无果
正确做法：Bootstrap 4 只支持 order-{n} 和带断点的 order-{bp}-{n}（如 order-md-1）。想实现“最前”效果，就用 order-0 或更小的负数（如 order--1）；“最后”则用较大正数（如 order-12）。
order- 类必须和 .row 配合才起作用
Flex 排序依赖父容器启用 display: flex，而 Bootstrap 4 的 .row 正是通过这个声明启用 flex 布局的。如果列元素不在 .row 下，或者被其他样式（比如 display: block）覆盖，order 就不会触发。
实操建议：
- 检查 DOM 结构：确保每个要排序的
.col-*都是.row的**直接子元素** - 避免嵌套
.row：不同.row是独立 flex 容器，彼此order值不比较 - 用 DevTools 的 “Computed” 面板确认目标元素的
display确实是flex，且order值已按预期计算
断点类不继承，未设置的断点会回退到 order: 0
Bootstrap 4 的 order-{bp}-{n} 类只在对应断点及以上生效，低断点不会“记住”高断点的值。比如 order-lg-1 在 md 宽度下完全无效，此时该列 order 就是默认的 0，可能插到其他列中间。
典型场景（移动端优先）：
- 手机（xs）要 A 在上、B 在下 → 给 A 加
order-xs-1，B 加order-xs-2 - 平板（sm）要 B 在左、A 在右 → 必须显式给 A 加
order-sm-2，B 加order-sm-1 - 不能只写
order-sm-1，漏掉 xs 就会导致手机端顺序错乱
数值建议控制在 -5 到 12 之间，避免和未来升级冲突，也方便团队协作理解。
视觉顺序 ≠ tab 顺序，可访问性需单独处理
order 只改变 flex 子项的视觉排列，HTML 源码顺序、语义结构、键盘 Tab 流向全都不变。这意味着屏幕阅读器仍按源码读取，用户用键盘导航时也会按原始顺序跳转。
如果业务强依赖 SEO 或无障碍（比如政务、教育类站点），要注意：
- 把重要内容（如正文）放在 HTML 前面，再用
order把导航栏“视觉左移” - 必要时配合
tabindex调整焦点顺序，但慎用——过度干预可能破坏原生行为 - 不要指望纯 CSS 排序解决所有可访问性问题，复杂布局建议重构 HTML 或加 ARIA 标识
真正容易被忽略的是：调试时只看页面渲染，却没用键盘实际 tab 一遍。很多“看起来对”的布局，一按 Tab 就暴露逻辑断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
