手机端“确认”按钮必须置于最底部，使用flex-column-reverse + flex-md-row切换视觉顺序，而非调整DOM顺序或order类；需搭配d-flex、校准热区与间距，并验证实际渲染的flex-direction。
手机端“确认”按钮必须放在最底部（拇指最先触达位置），不能靠改 HTML 顺序或 ms-auto 解决——那只是桌面逻辑的平移，会增加误触取消的风险。
用 flex-column-reverse + flex-md-row 切换视觉顺序
移动端按钮堆叠时，“确认”必须在最下方；大屏才恢复左右并排。这不是靠调整 DOM 顺序，而是用 flex-direction 反转视觉流：
-
flex-column-reverse让小屏（≤767px）下按钮垂直堆叠，“确认”出现在 DOM 最后，却渲染在最底端 -
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>
别碰 order 类，除非你覆盖所有断点
order- 类在手机竖屏（≤575px）下只认无前缀写法（如 order-2），order-sm-2 完全不生效。漏掉 xs 断点，按钮就回退到 order: 0，顺序失控：
- 要让“确认”在手机排第 2、平板排第 1、桌面排第 2，得写全：
order-2 order-sm-1 order-md-2 - 同一级所有按钮都必须设
order类，否则未设的按默认order: 0插队 -
order只在.row这类 flex 容器下有效，直接套在.modal-footer上可能失效（它虽是 flex，但部分封装组件会隔离样式）
热区和间距必须单独调，flex-column-reverse 不解决一切
反转顺序后，按钮间距、点击区域、文字对齐全得重新校准：
- 加
gap-2控制按钮间垂直间隙，别依赖父级margin或me-2—— 垂直堆叠时外边距方向容易错乱 - 检查按钮
padding是否足够：移动端最小触控热区建议 ≥48×48px，btn默认 padding 可能不够 - 避免
align-items: flex-start破坏垂直居中——默认align-items: center才能保证文字和图标在堆叠时对齐 - 真机测试比模拟器可靠：Chrome 设备模拟不会触发真实触摸判定逻辑，热区问题容易漏掉
三个地方最容易让 flex-column-reverse 失效
不是类名拼错，而是布局链路被切断：
-
.modal-footer被包在另一个d-flex容器里，父级justify-content直接压制子项的flex-direction - 全局 CSS 强制
.modal-footer { display: block !important; }，彻底废掉 flex 布局 - Vue/React 封装的 Modal 组件中，class 作用域隔离或内联 style 覆盖了
flex-direction，得看渲染后的实际 DOM
打开开发者工具，选中 .modal-footer，直接看 Computed 面板里的 display 是否为 flex、flex-direction 是否为 column-reverse——这是唯一可信依据。
