移动端按钮顺序不能照搬桌面端，因拇指从屏幕底部上滑时左侧“取消”更易误触；bootstrap默认水平排列会将关键操作“确认”置于难触达位置；用flex-column-reverse+flex-md-row可响应式翻转顺序，不改html、不写js、保留语义与无障碍支持。
移动端按钮顺序为什么不能照搬桌面端
拇指从屏幕底部向上滑动时，左侧“取消”按钮比右侧“确认”更易误触——尤其单手握持、活动半径受限的场景。Bootstrap默认的 .modal-footer 按 DOM 顺序水平排列，不区分设备，直接用会把关键操作（如“确认”）挤到视觉和操作上都更难触达的位置。
用 flex-column-reverse + flex-md-row 响应式翻转顺序
不改 HTML 结构、不写 JS、不破坏语义和无障碍支持，只靠工具类切换视觉顺序：
-
flex-column-reverse让小屏（ -
flex-md-row在 ≥768px 时切回水平排列，恢复“取消|确认”传统顺序 - 必须搭配
d-flex使用，否则类无效；.modal-footer默认是 flex 容器，但旧项目或自定义样式可能已重置display
示例结构：
<div class="modal-footer d-flex flex-column-reverse flex-md-row"> <br><button type="button" class="btn btn-secondary">取消</button><br><button type="button" class="btn btn-primary">确认</button><br> </div>
按钮间距和热区必须单独处理
flex-column-reverse 只翻顺序，不解决点击难问题：
- 加
gap-2控制按钮间垂直间距，避免小屏下按钮太挤 - 检查是否被父级
d-flex容器干扰：比如.modal-footer被套在另一个 flex 容器里，justify-content会压制子项的flex-direction - 全局 CSS 若有
.modal-footer { display: block !important; }，会直接废掉 flex 行为 - Vue/React 封装组件中，class 作用域隔离或内联 style 可能覆盖
flex-direction，得看渲染后的真实 DOM
真机测试比模拟器更可靠
Chrome 设备模拟器不会触发真实触摸事件判定逻辑，容易漏掉热区问题。例如：按钮高度不足 44px、左右间距过小、相邻元素 padding 干扰等，在模拟器里看不出，但在 iPhone 或安卓真机上极易误触。务必在 iOS Safari 和 Chrome Android 上实测拇指点击区域是否达标。
