真正要动的是HTML书写顺序加断点级order类，因flex-direction:row-reverse只改视觉顺序，不改DOM、tab焦点和屏幕阅读器顺序，且触控热区易错位；需用order-1 order-sm-2 order-md-1等显式覆盖各断点，并确保.modal-footer为d-flex容器。
移动端 Modal 底部按钮顺序不能靠“桌面端写法 + CSS 翻转”硬凑，真正要动的是 HTML 书写顺序 + 断点级 order 类，否则拇指够不到“确认”，误触“取消”就是常态。
为什么 flex-direction: row-reverse 是坑
它只改视觉顺序，不改 DOM 顺序、键盘 tab 顺序、屏幕阅读器遍历顺序。用户用键盘或 VoiceOver 操作时，“取消”先聚焦，“确认”后到，逻辑完全反了。真机触摸热区也容易错位——视觉右对齐的按钮，实际点击坐标可能偏左。
- 别在
.modal-footer上直接加flex-direction: row-reverse或flex-row-reverse工具类 - 别用
float-end或position: absolute推按钮，它们脱离文档流，无障碍和触控都失效 - Vue/React 封装组件里若用内联
style覆盖了order，渲染后 DOM 里就看不到效果
怎么用 order 类做响应式按钮排序
Bootstrap 的 order 工具类必须显式覆盖所有断点，否则未设断点的尺寸会回退到 order: 0，顺序失控。移动端（≤575px）才是真实操作起点，order-sm-* 在多数竖屏手机上根本不生效。
- 把“确认”按钮写在 HTML 后面，加
order-1 order-sm-2 order-md-1 - 把“取消”按钮写在前面，加
order-2 order-sm-1 order-md-2 - 所有同级按钮都要设
order类，漏一个就会插队到默认位置 - 确保
.modal-footer是d-flex容器，否则order不起作用
<div class="modal-footer d-flex"> <button type="button" class="btn btn-secondary order-2 order-sm-1 order-md-2">取消</button> <button type="button" class="btn btn-primary order-1 order-sm-2 order-md-1">确认</button> </div>
按钮间距和热区必须单独处理
order 只管顺序，不管间距和点击舒适度。移动端按钮太小、太挤，拇指一划就点错。
- 用
gap-2或gap-3控制按钮间统一间隙，比逐个加me-2更可靠 - 检查按钮高度是否一致：含图标时，
btn默认行高可能被破坏，加align-items: center或统一min-height - 真机测试比 Chrome 模拟器准——模拟器不触发真实触摸事件判定，热区问题容易漏掉
常见失效原因：不是类没写对，是布局被覆盖
加了 order 没反应？大概率不是语法错，而是 flex 布局本身被干掉了。
-
.modal-footer被套在另一个d-flex容器里，父级justify-content压制了子项的order - 全局 CSS 强制
.modal-footer { display: block !important; }，直接废掉 flex - 第三方 UI 库封装 Modal 时，class 作用域隔离或内联
style覆盖了flex-direction
打开 DevTools，选中 .modal-footer，看 Computed 里 display 是否为 flex、justify-content 是否为 normal、order 值是否生效——这才是真实状态。
