order-sm-在移动端无效是因为bootstrap 5中sm断点起始于576px，而手机竖屏≤575px需用无前缀.order-或.order-xs-*类，且必须显式覆盖每个断点，否则回退到order:0。
order 类在移动端没生效？不是写错，而是没覆盖 xs 断点 —— Bootstrap 5 中 .order-sm-* 在手机竖屏（≤575px）下完全不生效，必须显式写 .order-1 或 .order-xs-1。
为什么 order-sm-2 在 iPhone 上完全没反应
Bootstrap 5 的断点起始值是：xs（无前缀）对应 ≤575px，sm 从 576px 开始。只要设备宽度低于 576px（绝大多数手机竖屏），所有带 sm 及以上前缀的 order 类都会被浏览器忽略，此时列按 HTML 源码顺序渲染，order: 0 是默认值。
- 写了
.order-sm-2却期望手机上也生效 → 必须补.order-2（适配所有设备）或.order-xs-2（仅 xs） - 想让 A 在手机上排第 2、平板排第 1、桌面排第 2 → 三个断点都要设，缺一不可：
.order-2 .order-sm-1 .order-md-2 - 只设高断点、漏掉低断点，是移动端顺序错乱最常见原因
order 数值怎么选才不冲突
数值本身只是 flex order 属性的映射，但 Bootstrap 内置了 .order-first（order: -1）和 .order-last（order: 9999），如果你用 .order-5 或 .order--3，虽然合法，但容易和这些语义类产生隐式竞争。
- 推荐把数值控制在
-5到5之间，避免意外覆盖或被覆盖 - 不要混用
.order-first和.order-1：前者是语义类，后者是数值类，CSS 优先级相同，后声明者胜出 - 同一行内所有列都应显式设置
order类，否则未设的列保持order: 0，可能“插队”到中间
移动端优先时，order 断点怎么连写才可靠
移动端优先 ≠ 只写 xs；而是指「从最小断点开始逐级增强」。要实现三段切换（手机 A→B，平板 B→A，桌面 A→B），不能靠「回落」，必须主动覆盖每个关键区间。
- 断点链是
xs → sm → md → lg → xl，没有自动继承 ——.order-sm-1不会向下影响 xs，也不会向上影响 md - 典型写法：
order-xs-2 order-sm-1 order-md-2，分别对应 ≤575px、≥576px、≥768px - 如果跳过
sm直接写order-md-1，那在 576–767px（如小平板横屏）区间，该列会回退到order: 0，而非沿用 xs 值
最易被忽略的一点：order 类只在 .row（display: flex）容器下生效；如果外层用了 .container 直接包 div.col，没套 .row，order 完全无效 —— Flex 排序的前提是父容器为 flex 容器。
