bootstrap 4 不支持 order- 工具类，因其依赖的 flex 容器未默认启用 display: flex，且 order-first 等类为 bootstrap 5.3+ 新增；正确做法是使用 order-0 或带断点的 order-md-1 等，并确保元素位于 .row 下且父容器为 flex。
order属性在Bootstrap 5中才原生支持
Bootstrap 4 不提供 order- 工具类，强行用 CSS 的 order 会因 flex 容器未显式声明 display: flex 或 display: inline-flex 而失效。Bootstrap 5 开始，在 flex 工具类基础上补全了完整的 order- 响应式系列（如 order-1、order-md-3），前提是父容器必须是 flex 容器。
常见错误现象：order-2 加了但元素位置没变——大概率因为父级是 row（默认 display: block），不是 flex 容器。
- 确保父容器有
class="d-flex"或class="d-sm-flex"等显式 flex 声明 - Bootstrap 5 的
order-类直接映射 CSSorder值，order-0对应order: 0，order-last编译为order: 99999 - 不要和
col-混用在同一个元素上——col依赖row的负 margin 和 padding，而row默认不是 flex 容器；若要排序，改用d-flex flex-wrap+flex-fill或固定宽度类（如w-25）替代col
如何让三个 div 在移动端反序、桌面端正常
响应式排序的关键是组合不同断点的 order- 类。比如希望移动设备上显示为 C→B→A，桌面端恢复 A→B→C，不能只设 order-3，得利用断点覆盖逻辑。
示例结构：
<div class="d-flex flex-column flex-md-row"> <div class="order-3 order-md-1">A</div> <div class="order-2 order-md-2">B</div> <div class="order-1 order-md-3">C</div> </div>
-
order-*在xs断点生效（无媒体查询），order-md-*从md起覆盖 - 移动端：C（
order-1）排第一，B（order-2）第二，A（order-3）最后 → 实现 C→B→A - 桌面端：
order-md-1～order-md-3生效，顺序回归 A→B→C - 注意：如果用
flex-column，order控制的是垂直方向的排列次序；换成flex-row就是水平方向
order 与 flex-direction 冲突时谁优先
order 属性永远作用于 flex 项目的“视觉顺序”，它不改变 DOM 顺序，也不受 flex-direction 反转影响——也就是说，无论 flex-direction: row 还是 row-reverse，order: 1 的元素始终排在 order: 2 前面（按数值升序排列）。
- 真正受
flex-direction影响的是主轴起点和终点，而order是独立排序维度 - 常见误操作：想靠
flex-row-reverse配合order得到更复杂布局，结果发现顺序混乱——这时应放弃reverse，纯用order-控制 - 性能无差异，但可读性下降；建议一个容器只用一种排序机制：要么全靠
order-，要么全靠flex-direction+ DOM 顺序
IE11 下 order 类完全无效怎么办
Bootstrap 5 官方已放弃 IE11 支持，其 order- 类生成的 CSS 使用了 order 属性，而 IE11 虽支持 Flexbox，但对 order 的实现有严重 bug（尤其在嵌套 flex 或混合 flex-grow 时）。
- 最稳方案：降级使用 Bootstrap 4 + 手动加 style，例如
<div style="order: 2;">，并确保父级有 <code>display: -ms-flexbox和display: flex - 或改用绝对定位 +
top/left模拟排序（仅适用于静态、数量固定的场景） - 不要依赖 autoprefixer 补全 IE 的
order——它无法修复 IE 渲染引擎层面的排序逻辑缺陷
真正容易被忽略的是：即使加了 order- 类，在 Safari 13.1 之前的旧版本中，若父容器用了 flex-wrap: wrap 且子项尺寸动态变化，order 也可能错乱。遇到这类问题，优先锁定子项宽度/高度，避免换行触发重排异常。
