移动端按钮顺序不能照搬桌面端，因拇指操作时误触取消概率更高；应使用flex-column-reverse（小屏）与flex-md-row（大屏）响应式切换，并确保触控热区达标、避免布局干扰。
移动端按钮顺序为什么不能照搬桌面端
桌面端习惯“取消｜确认”，但手指从下往上滑动时，误触取消的概率远高于确认——尤其单手握持、拇指活动半径有限的场景。bootstrap 默认 .modal-footer 里按钮顺序是 html 源码顺序，没做任何平台适配，直接用会导致关键操作（如“确认”）被挤到左侧，反向增加操作成本。
用 flex-reverse 控制按钮视觉顺序，不改 DOM 结构
别删重写 HTML 或 JS 动态 swap，既破坏语义又难维护。直接在 .modal-footer 上加响应式 flex 工具类：
-
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">
<button>取消</button><button>确认</button>
</div>
按钮间距和点击热区必须单独调，reverse 不解决一切
flex-column-reverse 只翻顺序，不解决移动端点击难的问题：
- 垂直排列时，按钮间用
gap-3（不是mb-3），避免因flex-column-reverse导致margin-bottom变成“上边距”而错位 - 每个按钮加
py-4 px-5+min-height: 56px，确保触控区域达标；btn-lg单独用不够，它只放大文字和边框，不扩热区 - 若用
btn-group，记得给整个组加gap-2，否则内部按钮间距会继承父级 flex 设置，不一致
检查三个地方，避免 reverse 失效
常见失效不是类名写错，而是布局干扰：
-
.modal-footer被套在另一个d-flex容器里，父级justify-content压制了子项的flex-direction - 全局 CSS 强制
.modal-footer { display: block !important; }，直接废掉 flex - Vue/React 封装的 Modal 组件，class 作用域隔离或内联 style 覆盖了
flex-direction，得看渲染后的真实 DOM
真机测试比模拟器可靠——Chrome 的设备模拟不会触发真实触摸事件的判定逻辑，容易漏掉热区问题。
