应使用断点类控制 flex-direction 响应式变化：如仅 xs 倒序用 flex-row-reverse + flex-sm-row，仅 md 及以上倒序用 flex-md-row-reverse + flex-lg-row；避免混用 row-reverse 与 column-reverse，勿依赖 order 类做结构级倒序。
flex-row-reverse 在小屏生效却影响了桌面端
直接写 flex-row-reverse 会全局生效，不是“只在手机上倒序”。Bootstrap 的响应式类是移动优先，没加断点前缀就作用于所有尺寸。
常见错误现象：
写了 flex-row-reverse，结果桌面端也从右往左排 —— 缺少恢复正常顺序的断点类；
用了 flex-md-row-reverse，但手机没反应 —— md 起始宽度是 ≥768px，手机根本匹配不到。
- 想让倒序只出现在 xs（≤575px）：用
flex-row-reverse+flex-sm-row - 想只在 md 及以上倒序：用
flex-md-row-reverse+flex-lg-row（避免影响 xl） - 注意断点类叠加顺序无关紧要，Bootstrap 按媒体查询规则覆盖，后声明的生效
column-reverse 和 row-reverse 混用时方向逻辑混乱
flex-column-reverse 是垂直方向倒序（从下往上），flex-row-reverse 是水平方向倒序（从右往左）。两者不能同时加在同一个容器上，否则主轴方向不明确，浏览器行为不可靠。
典型误用场景：
想实现“手机上下堆叠且图片在文字上方、桌面左右并排且图片在左”，却给容器同时加 flex-column-reverse 和 flex-md-row —— 这样在 md 断点下，flex-md-row 会覆盖 flex-column-reverse，但方向切换本身没问题；真正出问题的是混用 flex-row-reverse 和 flex-column-reverse。
- 方向切换应只改
flex-direction对应的类，不要跨轴混用 - 需要视觉顺序反转时，优先用
flex-column-reverse（移动端）+flex-sm-row（桌面），而非依赖order-*类 - 如果必须水平倒序，就只用
flex-row-reverse配合断点类，别掺 column 类
order-* 类无法稳定控制跨断点的渲染顺序
order 属性只调整 flex 项目在当前主轴上的位置，它不改变主轴方向。当容器从 column 切到 row，order-1 的含义就从“从上往下第1个”变成“从左往右第1个”，语义断裂，容易错位。
更麻烦的是：order-xs-1 在 xs 生效，但没写 order-sm-0 → sm 下它还是 order: 1，可能把元素插到中间，破坏栅格对齐。
-
order适合微调同方向下的局部顺序，不适合做“结构级”倒序 - 想让 DOM 后写的元素视觉上提前，用
flex-column-reverse或flex-row-reverse更直接可靠 - 若真要用
order，务必为每个断点显式设值，比如order-0 order-sm-1 order-md-0
flex-wrap-reverse 不是方向反转，而是换行顺序反转
flex-wrap-reverse 不会让子元素倒序排列，它只影响多行 flex 容器中“行”的堆叠顺序：默认 flex-wrap: wrap 是从上到下放行，flex-wrap-reverse 改成从下到上放行。单行容器加了也没效果。
常被误当作 row-reverse 的替代方案，但实际完全不是一回事。
- 需要元素整体倒序 → 用
flex-row-reverse或flex-column-reverse - 需要多行时“最后一行显示在最上面” → 才考虑
flex-wrap-reverse - 它不改变单行内项目的顺序，也不影响 column 方向的排列逻辑
实际中最容易被忽略的，是断点类的起始宽度定义：xs 是 ≤575px，sm 是 ≥576px，md 是 ≥768px —— 写 flex-md-row-reverse 前，先确认目标设备是否真的落在这个区间里。
