bootstrap栅格系统依赖flex布局实现整行列顺序反转，需用flex-row-reverse或flex-column-reverse控制容器方向，而非order类；正确用法是包裹容器加d-flex flex-column-reverse与flex-md-row组合断点，避免直接修改.row。
Bootstrap 栅格系统本身不直接提供「整行列顺序反转」的类名，真正起作用的是底层 Flex 布局控制 —— 也就是 flex-direction 和 flex-row-reverse / flex-column-reverse 这些工具。别指望 .col-6 自己翻转顺序，得靠容器级 flex 行为驱动。
为什么用 flex-row-reverse 而不是 order 类？
两者都能“看起来”调换顺序，但机制完全不同：
-
order是单个子项的排序权重，只在同级 flex 容器内生效，且不影响语义流和键盘 tab 顺序；调试时容易被覆盖（比如父容器没设display: flex） -
flex-row-reverse是容器级方向翻转，所有子项自动倒序排列，语义流、tab 顺序、屏幕阅读器都同步反转 —— 更符合「真正交换位置」的预期 - 如果你的目标是移动端内容与图片上下顺序切换（比如图片在上、文字在下），
flex-column-reverse比一堆order-sm-*更简洁可靠
flex-column-reverse 在移动端怎么用才不崩？
常见于「图片+描述」模块希望小屏时图片优先展示，桌面端左右并排。关键不是加类，而是控制断点组合：
- 给包裹容器加
d-flex flex-column-reverse：强制小屏垂直倒序 - 加
flex-md-row：≥768px（md 断点）切回水平排列，flex-column-reverse的 reverse 效果自动失效 - 子元素用
col-md-6或w-100 w-md-auto控制宽度，避免 flex 子项撑满整行导致错位 - 别把
flex-column-reverse加在.row上 ——.row默认是flex-direction: row，强行改会破坏栅格计算逻辑；应该套一层自定义容器，或直接用d-flex替代.row
桌面端想右对齐按钮组，flex-row-reverse 会连带影响栅格宽度吗？
不会。栅格列宽（如 col-4、col-lg-3）由 flex-basis 和 max-width 控制，和 flex-direction 无关。但要注意：
-
justify-content: flex-end和flex-row-reverse效果不同：flex-row-reverse真正反转子项顺序，justify-content只是挪动位置，源码顺序不变 - 如果按钮组用了
.btn-group，它内部有display: inline-flex，此时加flex-row-reverse会翻转按钮自身顺序，不是你想要的「整体右对齐」——该用text-end或ms-auto - 在
.row内混用flex-row-reverse和.col类，可能触发浏览器对flex+grid混合行为的兼容处理，建议统一用d-flex+col或纯d-flex+flex-grow组合
最常被忽略的一点：flex-direction: column-reverse 下，margin-bottom 会变成「上边距」，因为主轴方向变了。调试时看到间距异常，先检查是否误用了垂直方向 margin 类。
