flex-md-row-reverse 必须与 d-flex 搭配使用，不能直接加在 .row 上，因其 display: flex 和 flex-direction: row 的硬编码样式优先级高于响应式工具类，且 .row 的负 margin 和 flex-wrap 可能引发布局异常。
直接用 flex-md-row-reverse 这类响应式类，但必须搭配 d-flex，且不能加在 .row 上——否则大概率失效。
为什么 flex-md-row-reverse 加在 .row 上不生效
因为 .row 的 CSS 是 Bootstrap 源码里硬写的 display: flex; flex-direction: row;，而响应式工具类（如 flex-md-row-reverse）的 CSS 优先级通常不够覆盖它。更麻烦的是：.row 还自带负 margin 和 flex-wrap: wrap，混用 flex 工具类容易导致布局塌陷或额外空白。
调试时看 computed styles：如果最终 flex-direction 还是 row，说明类没起作用，不是写错了断点名，而是被父容器样式压制了。
- ✅ 正确做法：去掉
.row，改用d-flex flex-md-row-reverse组合 - ✅ 或保留语义结构：外层套
<div class="d-flex flex-md-row-reverse"><div class="row">...</div></div>，但要留意内层.row的负 margin 可能造成顶部/底部多出空白 - ❌ 错误写法：
flex-row-reverse-md、row-reverse-md、flex-md-reverse—— 这些类名根本不存在，浏览器直接忽略
flex-md-row-reverse 的断点行为和常见误配
Bootstrap 响应式类遵循“移动优先”原则：flex-md-row-reverse 表示“从 md 断点（≥768px）开始生效”，xs 和 sm 尺寸下仍为默认 flex-row（即从左到右）。
-
flex-sm-row-reverse：≥576px 时倒序，xs（ -
flex-lg-row-reverse：≥992px 才倒序，xs/sm/md全部正序 - 别指望
flex-row-reverse自动响应——它没有断点前缀，是全局生效的，会覆盖所有尺寸 - 如果想“小屏倒序、大屏正序”，得用
flex-column-reverse flex-md-row组合（注意顺序：先写小屏类，再用更大断点覆盖）
倒序后 margin 类行为突变，怎么稳住间距
当主轴方向翻转（比如 flex-row-reverse 或 flex-column-reverse），margin 的作用方向会跟着主轴起点走。原本的 mb-3 在 column-reverse 容器里实际变成了“上边距”，me-2（margin-right）在 row-reverse 下也会跑到左边。
- 统一用朝向主轴起点的 margin 类：
mt-*替代mb-*，ms-*替代me-* - 避免混用
mr-*/ml-*—— 它们在 reverse 场景下语义混乱，ms（margin-start）和me（margin-end）才是逻辑安全的选择 - 如果子元素用了
mb-3后发现间距跑到了顶部，换成mt-3就能立刻对齐
桌面端右对齐按钮，别用 flex-row-reverse 硬拗
想让一排按钮整体靠右，flex-row-reverse 不是解法——它会让按钮自身顺序也反转（3,2,1），还可能破坏 tab 键顺序和屏幕阅读器流。
- ✅ 推荐：
justify-content-end（配合d-flex），视觉右对齐，DOM 顺序和语义不变 - ✅ 或用
ms-auto：给第一个按钮加ms-auto，其余保持自然流 - ❌ 避免：
flex-row-reverse+justify-content-start这种绕弯组合，既难维护又易出错
真正需要 row-reverse 的场景，通常是内容与媒体（如图片/文字）在不同断点下交换视觉位置，且要求 DOM 顺序、tab 顺序、可访问性全部同步反转——这时候才值得用它。其他情况，优先考虑对齐类而非方向翻转。
