order-md-1 在手机上无效，因其仅在 ≥768px 生效，而手机通常 ≤575px；需显式添加 order-1 才能在小屏生效，且父容器必须为 .row（display: flex），order 仅改变视觉顺序，不影响 DOM、SEO 和可访问性。
order-md-1 在手机上没反应，是因为断点根本没匹配
Bootstrap 的 order-md-1 类只在 ≥768px（md 断点起始）生效，而手机竖屏通常 ≤575px（xs），此时类名压根不被浏览器解析，元素回退到默认 order: 0，按 HTML 源码顺序渲染。这不是 bug，是响应式类“向上生效、不向下继承”的设计逻辑。
常见误操作：order-md-1 单独写，指望小屏也生效；或者混用 order-2 order-md-1——小屏仍按 order: 2 排，和预期相反。
- 想让手机也排序，必须显式加
order-1（适配所有设备，包括 xs） -
order-xs-1在 Bootstrap 5 中已移除，别再用 - 要实现“手机 A 在前、平板 B 在前、桌面 A 在前”，就得写全：
order-1 order-sm-2 order-md-1，缺一不可
父容器不是 .row，order 类完全无效
order-* 依赖 Flex 布局，而 Bootstrap 中只有 .row 自带 display: flex。如果直接把 .col-* 塞进 .container 或普通 <div> 里，order 属性不会触发任何效果——它不是通用 CSS 属性，只在 Flex 容器下有意义。
- 确保目标元素是
.row的直接子元素；嵌套在.col里的内容再加order-*，无效 - 别用
.row套.row再加order：内层.row仍是 Flex 容器，但它的子元素（即你写的.col）已脱离外层.row的 Flex 上下文，order值只在内层生效，无法跨行调度 - 调试时看 Computed Styles：确认父元素
display确实是flex，且目标元素的order值已生效，而不是被!important或内联style="order: 99"覆盖
order 只改视觉顺序，不碰 DOM 和可访问性
这是最容易被忽略的深层限制。order-* 只是让浏览器在 Flex 主轴上按数值重绘元素位置，HTML 源码、屏幕阅读器读取流、键盘 Tab 顺序、SEO 爬虫看到的结构，全部保持原始顺序不变。
- 原生 Bootstrap 旋转木马里把导航写在正文后面，再用
order-md-1推到左边，对 SEO 有利——爬虫仍先抓到正文 - 但屏幕阅读器用户会按源码顺序听到导航→正文，而视觉上却是正文→导航，存在语义错位
- 若需同步调整 Tab 顺序，得额外加
tabindex="-1"或用 JS 动态控制tabindex属性，不能只靠 CSS
别指望 order 解决多级定位需求
order 只做相对排序，不是绝对定位；它只在同一 .row 容器内有效，跨行或嵌套结构里无法靠它调度。
真要实现“某列在小屏跳到顶部、中屏居中、大屏固定右侧”，光靠 CSS 很难干净解决——这时候该考虑重构 HTML 结构，而不是堆砌更多 order-* 类。复杂点在于：order 是相对排序，数值本身没有绝对意义，只表达同一容器内项目的先后关系；一旦断点覆盖不全、数值冲突或父容器 Flex 状态异常，顺序就可能在某个尺寸下突然崩掉。
