bootstrap断点类“向上生效”，order-md-*仅在≥992px生效，手机≤575px时回退默认order:0；需显式用order-xs-1或order-1控制小屏顺序，否则按html源序渲染。
order-类只在对应断点及以上生效，小屏不继承
加了 order-md-1 在手机上没反应，不是 bug，是设计如此：Bootstrap 的断点类“向上生效”，order-md-* 仅在 ≥992px（md 及以上）起作用，≤575px（xs）时该类根本不会被浏览器解析，元素回退到默认 order: 0，按 HTML 源顺序渲染。
想让手机也排序，必须显式写 order-xs-1 或无前缀的 order-1（后者适配所有设备）。常见误写：order-2 order-md-1 → 小屏仍按 order: 2 渲染，视觉顺序和预期相反。
- Bootstrap 5 断点链：xs
- 写
order-sm-2，只对 ≥576px 生效；≤575px 时该元素 order 值为 0 - 若需三段式切换（手机 A 在前、平板 B 在前、桌面 A 在前），就得覆盖三个断点：
order-xs-1 order-sm-2 order-md-1
order-类生效有三个硬性前提
缺一不可，且不报错，失效时只能靠 devtools 查 computed order 值定位问题。
- 父容器必须是
.row（即display: flex）；用.container直接包.col-*会失效 - 目标元素必须是
.row的**直接子元素**；嵌套在.col-*里的子.row再加order-md-*无效 - 不能被其他 CSS 覆盖：比如内联样式
style="order: 99"或带!important的自定义规则会压倒 Bootstrap 类
同一行内所有列都得显式设 order-值
未设置的列默认 order: 0，容易意外“插队”到最前。比如一行三列，只给中间列加 order-md-1，左右两列仍是 order: 0，结果中间列反而被夹在中间，而非真正“提上来”。
- 数值本身无绝对意义，只表达相对顺序；
order-md-5和order-md-10的效果等同于order-md-0和order-md-5，只要差值一致，顺序就不变 - 建议控制在 -5 到 5 之间，避免和 Bootstrap 内置的
order-first（order: -1）、order-last（order: 9999）冲突 - 不同
.row是独立 flex 容器，彼此order值互不影响；跨行调度无法靠order-*解决
order 只改视觉顺序，不改 DOM 和可访问性
这是最容易被忽略的深层限制——它不是移动元素，只是 flex 渲染时调整绘制顺序。HTML 源码顺序、屏幕阅读器读取顺序、键盘 tab 顺序，全部保持原样。
- SEO 爬虫看到的仍是原始 DOM 结构，所以把正文写在导航前面再用
order-md-2推后，对 SEO 有利 - 如果需要同步改变 tab 顺序，得额外加
tabindex或用 JS 动态调整属性 - 真要实现“某列在小屏跳到顶部、中屏居中、大屏固定右侧”，光靠 CSS 很难干净解决——这时候该考虑重构 HTML 结构，而不是堆砌更多
order-*类
