order-md-2 设置的是 order: 2，视觉顺序由 order 值升序决定；未生效最常见原因是视口宽度小于 md 断点（768px），导致该类未被应用。
order-md-2 不是让列“排到第 2 位”，而是给它设 order: 2；同一行内所有 .col-* 的视觉顺序，由它们的 order 值从小到大决定。
为什么加了 order-md-2 却没变位置？
最常见原因不是写错了类名，而是断点没生效或父容器不满足条件：
- 当前视口宽度小于
md断点（即 order-md-2 完全不加载——手机上无效是正常现象 - 父元素没加
.row，或被其他 CSS 覆盖了display: flex，order属性在非 flex 容器里无意义 - 同一行中其他列没设
order类，默认都是order: 0，结果你的order-md-2反而排到最后 - 写了
order-1 order-md-2这种组合：小屏用order: 1，中屏切到order: 2，但没写order-sm-*，导致平板横屏（sm）下回落到order: 0，顺序突变
order-md-2 和 order-2 有什么区别？
关键在作用范围和响应行为：
-
order-2是全局生效，所有屏幕尺寸都强制order: 2，移动端也会被重排——常导致阅读流断裂 -
order-md-2只在 ≥768px（中屏及以上）起作用，≤767px 时按 HTML 源顺序渲染，更符合移动优先逻辑 - Bootstrap 5 的断点类「只在对应及更高断点生效」，不向下继承。比如没写
order-sm-*，那在 sm（576–767px）下就用默认order: 0 - 混用时注意覆盖关系：
order-1 order-md-2在 md+ 下以order-md-2为准；但若同时存在order-sm-3，则 sm 断点用 3，md 用 2，xs 用 1
怎么安全地实现「PC 导航左、内容右，手机内容上、导航下」？
核心是让 HTML 源顺序利于 SEO 和可访问性，再靠 order 类微调视觉：
- HTML 里先写正文列，再写导航列（语义优先）
- 给正文列加
order-1 order-md-2：手机保持原序（上），PC 变成右栏 - 给导航列加
order-2 order-md-1：手机排第二（下），PC 变成左栏 - 避免用
order-first或order-last做这种场景——它们编译为order: -1和order: 13，容易和手动数值冲突 - 调试时直接在浏览器 devtools 的 Computed 面板看
order值，比猜类名快得多
真正容易被忽略的是：order 只改视觉顺序，不影响 DOM 结构、tab 键焦点流、屏幕阅读器读取顺序。如果导航列在 HTML 里靠后，又没做 tabindex 或 ARIA 补充，键盘用户和视障用户仍会先碰到正文——这不是 order-md-2 能解决的问题。
