加了order-md-1在小屏下没反应，因为该类仅在≥992px生效，而手机竖屏≤575px，此时回退到源码顺序；需用order-xs-1或order-1才能影响小屏。
为什么加了order-md-1在小屏下没反应
因为order-md-*只在 ≥992px（md 及以上）生效，手机竖屏通常 ≤575px（xs），此时类名根本不被应用，浏览器回退到源码顺序。这不是 bug，是 bootstrap 响应式类的设计逻辑——断点类“向上生效”，但不向下继承。
- 写
order-sm-2，只对 ≥576px 生效；≤575px 时该元素 order 值为默认的 0 - 想让手机也排序，必须显式加
order-xs-1或无前缀的order-1（后者适配所有设备） - 常见误写：
order-2 order-md-1→ 小屏仍按 order: 2 渲染，和预期相反
order-类必须满足的三个前提条件
缺一不可，否则完全不生效，且无任何报错提示。
- 父容器必须是
.row（即 display: flex）；用.container直接包.col会失效 - 目标元素必须是
.row的**直接子元素**；嵌套在.col里的子.row再加order-无效 - 不能被其他 CSS 覆盖：比如内联样式
style="order: 99"或带!important的自定义规则会压倒 Bootstrap 类
如何安全地组合多个断点的order-值
数值本身没有绝对意义，只表达相对顺序；同一行内所有列的order-值应保持差值一致，避免维护混乱。
- 推荐范围控制在 -3 到 5 之间，避开
order-first（-1）和order-last（13）的隐含语义冲突 - 断点类要覆盖关键区间：比如希望「手机 A 在前、平板 B 在前、桌面 A 在前」，就得写全
order-xs-1 order-sm-2 order-md-1 - 不要依赖“未设置即不变”：未设
order-md-的列在 md 断点下是 order: 0，可能意外插队到最前
order-只改视觉顺序，不改 DOM 和可访问性
这是最容易被忽略的深层限制——它不是移动元素，只是 flex 渲染时调整绘制顺序。
- HTML 源码顺序、屏幕阅读器读取顺序、键盘 tab 顺序，全部保持原样
- SEO 爬虫看到的仍是原始 DOM 结构，所以把正文写在导航前面再用
order-md-2推后，对 SEO 有利 - 如果需要同步改变 tab 顺序，得额外加
tabindex或用 JS 动态调整tabindex属性
.row容器内有效，跨行或嵌套结构里无法靠它调度。真要实现“某列在小屏跳到顶部、中屏居中、大屏固定右侧”，光靠 CSS 很难干净解决——这时候该考虑重构 HTML 结构，而不是堆砌更多order-类。
