Bootstrap 的 .order-* 类通过 Flex 的 order 属性控制列的视觉渲染顺序，需父容器为 display: flex（如 .row），仅对直接子元素生效；.order-0 到 .order-12 为预设值，数值越小越靠前，默认 order: 0；响应式写法如 .order-md-3 仅在对应断点生效；常见失效原因包括父容器非 Flex、元素脱离文档流或层级嵌套过深。
Order 类名在 Bootstrap 4/5 中如何控制列顺序
Bootstrap 的 .order- 类不是“排序数据”，而是改变 Flex 容器中子元素的视觉渲染顺序。它依赖于父容器是 display: flex（如 .row），且只对直接子元素（即 .col-*）生效。
常见错误是给嵌套的 .row 或非直接子元素加 .order-*，结果完全没反应——因为 Flex order 属性不继承，也不穿透层级。
-
.order-0到.order-12是预设值（Bootstrap 5 还支持.order-first和.order-last） - 数值越小，越靠前；
.order-0比.order-1优先级高 - 未设置时默认为
order: 0，所以.order-0实际上等价于不写 - 响应式写法如
.order-md-3表示仅在md及以上断点生效
为什么 .order-* 在某些布局里失效
最常踩的坑是：把 .order- 加在非 Flex 容器的子元素上。比如用 .container 直接包 .col，跳过了 .row ——此时 .col 是块级元素，order 属性无效。
另一个典型场景是用了 .col-auto 或自定义宽度类（如 flex: 0 0 30%），但没确认父容器是否仍为 Flex。Bootstrap 5 的 .row 默认是 display: flex，但如果你覆盖了 CSS 或用了旧版 .row（如 Bootstrap 3），就可能失效。
- 检查浏览器开发者工具：选中列元素 → 查看
Computed面板里的order值是否被应用，以及display是否为flex - 避免和
.float-或position: absolute混用——它们会脱离文档流，Flex order 失效 - 在 Bootstrap 4 中，
.order-类需配合.d-flex手动启用 Flex，而 Bootstrap 5 的.row已内置
移动端优先重排：从堆叠到并排再调序
实际项目中，常见需求是「手机竖屏堆叠，平板横屏左右分栏，但右侧内容要显示在左侧上面」——这时不能只靠 .col-* 的宽度切换，必须介入 order 控制视觉流。
例如：想让 aside 在桌面端出现在主内容左侧，但在移动端显示在主内容下方：
<div class="row"> <div class="col-12 col-md-8 order-md-0">主内容</div> <div class="col-12 col-md-4 order-md-1">侧边栏</div> </div>
注意：这里 col-12 确保移动端占满一行，order-md-0 和 order-md-1 仅在 md 起效，且因两者默认都是 order: 0，所以必须显式设置其中一个来打破默认顺序。
- 不要只改一个列的
order：Flex 排序是相对的，两个元素都设order更可控 - 避免使用过大数值（如
.order-100）：虽然合法，但可维护性差，也容易和未来新增的类冲突 - 如果涉及三列以上重排，建议画个表格列出各断点下的预期 order 值，再逐个设置
与 CSS Grid 的 order 冲突吗
不冲突，但别混用。Bootstrap 栅格基于 Flex，而 CSS Grid 的 order 是 Grid Item 属性，作用域完全不同。如果你把 .row 改成 display: grid，那 .order- 类就彻底失效了——因为它的 CSS 规则是针对 flex 的。
更隐蔽的问题是：某些 UI 库或自定义样式可能全局设置了 * { order: unset }，或者用 !important 覆盖了 Bootstrap 的 order 声明。这时候得查源码或用 !important 覆盖回来（不推荐，应优先修复源头）。
- Bootstrap 5.3+ 的
.order-类带!important，但老版本没有，升级时要注意兼容性 - 如果用 Sass 自定义构建，确保
$enable-flex为true，否则.row不是 Flex，.order-就只是个空壳 - 真正难调试的，往往是 order 值正确、但视觉没变——这时候八成是父容器没 flex，或者有其他定位/浮动干扰了布局流
