order-md-1在手机上无效是设计逻辑而非bug，因其仅在≥768px生效，而手机≤575px需显式用order-1覆盖；且必须确保父容器为.row（display:flex）且目标为直接子元素。
order-md-1 在手机上没效果，不是 bug 是设计逻辑
Bootstrap 的 order-{bp}-* 类“只向上生效”，order-md-1 仅在 ≥768px（md 起始）时触发，而手机竖屏通常 ≤575px（xs），此时该类完全不被解析，元素回退到默认 order: 0，按 HTML 源码顺序渲染。
常见误操作包括：
– 单独写 order-md-1，指望小屏也生效
– 混用 order-2 order-md-1：小屏仍按 order: 2 排，和预期相反
– 以为 “移动端优先” 就能自动继承，其实断点类之间不继承、不回落
想让手机也排序，必须显式覆盖 xs 断点：
– Bootstrap 5 中已移除 order-xs-*，直接用 order-1（无前缀）适配所有设备
– 或写全三段：order-1 order-sm-2 order-md-1，分别对应 ≤575px、≥576px、≥768px
父容器不是 .row，order 类完全不生效
order 是 Flex 布局属性，只在 display: flex 容器下起作用。Bootstrap 中只有 .row 默认设了 display: flex；.container、普通 <div> 或嵌套的 .col 都不是 Flex 容器。
失效典型场景：
– 把 <div class="col"> 直接塞进 <div class="container">，跳过 .row
– 给 .col 里的子元素（比如 <p> 或内层 <div>）加 order-* —— 它不是 .row 的直接子元素
– 外层 .row 里再套一个 .row，内层 .row 的子元素 order 只在内层生效，无法跨行调度
调试建议：
– 打开浏览器 DevTools，选中目标元素，看 Computed Styles 里 display 是否为 flex
– 确认 order 值是否已计算出来，而不是被 !important 或内联 style 覆盖
数值怎么设才不冲突、不插队
order 数值越小越靠前，但数值本身只是相对排序依据。未设置的列默认 order: 0，容易“插队”到中间。
实操要点：
– 同一行内所有 .col 都应显式设置 order-* 类，避免遗漏导致顺序错乱
– 推荐控制在 -5 到 5 之间，避开 Bootstrap 内置的 .order-first（order: -1）和 .order-last（order: 9999）
– 不要混用 .order-first 和 .order-1：CSS 优先级相同，后声明者胜出，语义易混淆
– order-0 等价于不写，没必要显式加
示例（A/B 两列三段切换）：<div class="row"><div class="col order-2 order-sm-1 order-md-2">A</div><div class="col order-1 order-sm-2 order-md-1">B</div></div>
order 只改视觉顺序，不影响 DOM、Tab 键和屏幕阅读器
这是最容易被忽略的深层限制：order 仅改变 Flex 主轴上的渲染位置，HTML 结构、键盘 Tab 顺序、屏幕阅读器读取流、SEO 爬虫看到的内容，全部保持原始源码顺序不变。
后果举例：
– 把导航用 order-md-1 推到左侧，对 SEO 有利（爬虫先抓正文），但屏幕阅读器用户会先听到导航再听正文，与视觉顺序错位
– 用户按 Tab 键仍按源码顺序聚焦，不会随 order 改变
若需同步调整交互流：
– 非常规需求下，得额外加 tabindex="-1" 并用 JS 动态控制 tabindex 属性
– 不要指望 order 解决“某列小屏跳顶部、中屏居中、大屏固定右侧”这类多级定位——它只做相对排序，不是绝对定位；真要稳定实现，该重构 HTML 结构
