flex-md-row-reverse需配合d-flex生效，因.row自带flex-direction:row会覆盖；小屏反向用flex-column-reverse加flex-sm-row覆盖；margin方向随主轴翻转而变，需改用对应方向类。
直接用带断点前缀的 flex-{breakpoint}-row-reverse 或 flex-{breakpoint}-column-reverse 类，但必须配合 d-flex（或响应式 d-{breakpoint}-flex）才能生效；单独写 flex-md-row-reverse 会失效，因为缺少 display: flex 上下文。
为什么 flex-md-row-reverse 加在 .row 上经常没反应
Bootstrap 的 .row 虽然默认是 display: flex，但它内部样式优先级高，且混用响应式 flex 工具类容易触发不可预测的 margin / wrap 行为。更关键的是：.row 自带硬编码的 flex-direction: row，会覆盖你加的 flex-md-row-reverse。
- 推荐做法：去掉
.row，改用d-flex flex-md-row-reverse组合 - 如果必须保留栅格语义（比如要套
col-md-6），就外层包一层d-flex flex-md-row-reverse，内层再放.row，但要注意内层.row的负 margin 可能导致额外空白 - 调试时务必检查 computed styles，确认最终生效的
flex-direction值，而不是只看 class 列表
flex-column-reverse 怎么只在小屏生效
Bootstrap 是移动优先，flex-column-reverse 默认作用于 xs 断点（≤575px）。想让它“仅小屏反向、中大屏恢复水平”，必须显式补上覆盖类：
- 写法：
d-flex flex-column-reverse flex-sm-row -
flex-column-reverse在 xs 下生效，让子元素垂直倒序 -
flex-sm-row从 ≥576px（sm 起始）起切换为水平布局，同时自动取消 reverse 效果（row不继承reverse） - 别写
flex-md-column-reverse期待手机倒序——md 断点是 ≥768px，手机根本匹配不到
反转后 margin 错位（比如 mb-3 跑到顶部）
这是 flex-direction: column-reverse 或 row-reverse 的主轴翻转副作用：margin-bottom 实际作用方向变成“朝向主轴起点”，不再是视觉下方。
- 在
column-reverse容器里，mb-3会撑开元素“上方”空白；统一改用mt-3才稳定控制相邻间距 - 在
row-reverse容器里，me-3（即margin-right）会变成“左边距”，建议优先用ms-3（margin-left） - 这不是 bug，是 Flex 主轴方向变化带来的必然行为；靠删 margin 解决不了，必须换方向类
右对齐按钮组别误用 flex-row-reverse
想让一组按钮整体靠右，不是所有场景都适合 flex-row-reverse——它会把按钮顺序也倒过来，破坏可访问性和 DOM 流。
- 更合理的选择是：
justify-content-end（或justify-content-md-end） -
flex-row-reverse适合真正需要“后写的 HTML 元素渲染在前”的场景（如图文模块中图片在文字上方） - 按钮组顺序敏感，用
justify-content-*控制对齐，用order-*微调单个按钮位置，比全局反转安全得多
最易被忽略的一点：所有 flex 方向类（flex-*）都依赖容器已声明 display: flex，而 Bootstrap 中只有 d-flex 及其响应式变体（d-sm-flex 等）提供这个声明——漏掉它，其他一切类都是空转。
