真正要调的是html书写顺序+order类，而非justify-content-center；移动端按钮顺序需按源码顺序配合断点级order控制，主操作靠右、次操作靠左，且所有同级按钮都必须显式设置order类。
justify-content-center 不解决移动端按钮顺序问题，真正要调的是 HTML 书写顺序 + order 类，否则“取消”在左、“确定”在右的视觉逻辑在手机上会反直觉。
按钮顺序错乱的根本原因不是 CSS，是 HTML 源码顺序没适配移动端优先
Bootstrap .modal-footer 默认是 display: flex 容器，子项（按钮）按 HTML 出现顺序从左到右排列。但很多项目沿用桌面习惯：先写「确定」再写「取消」，导致手机上「确定」在左、「取消」在右——用户拇指自然落在右侧，却要点左边才能确认。
这不是样式能“覆盖”的问题，而是语义和交互路径被破坏了。移动端优先的正确顺序应是：主操作（如「保存」「确定」）靠右，次操作（如「取消」「关闭」）靠左。
- 把「确定」按钮写在 HTML 最后位置，它默认就会出现在最右
- 把「取消」按钮写在它前面，自然居中偏左；若需更明确左对齐，加
ms-auto（不是me-auto） - 避免用
flex-direction: row-reverse或float-end强行翻转——键盘焦点、屏幕阅读器、触控热区全会错位
需要响应式切换按钮顺序？必须显式覆盖 order 的每个断点
比如想实现：手机上「取消」在左、「确定」在右；平板上反过来；桌面又恢复手机顺序。不能只写 order-md-1，因为 Bootstrap 5 的 order-sm-* 在 ≤575px（绝大多数竖屏手机）下完全不生效。
必须这样写：
<div class="modal-footer"> <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-（无前缀）控制 ≤575px（xs），是移动端实际生效的起点 -
order-sm-从 576px 开始，覆盖小平板横屏等中间尺寸 - 漏掉任一断点，该尺寸下按钮就回退到
order: 0，顺序不可控 - 所有同级按钮都要设
order类，否则未设的会“插队”到默认位置
别让 .modal-footer 失去 flex 布局能力
如果加了 justify-content-center 还是不居中，或 order 类完全无效，大概率是父容器或自定义样式破坏了 flex 结构：
- 检查是否在外层套了
<div class="d-flex"> ——这会让 <code>.modal-footer变成 flex 子项，其内部justify-content和order全部失效 - 搜索全局 CSS 是否写了
.modal-footer { display: block !important; }，直接废掉 flex - Vue/React 封装的 Modal 组件可能用
style内联覆盖了justify-content，需看渲染后 DOM 的 Computed 样式 - 快速验证：开发者工具里选中
.modal-footer，确认display是flex，且justify-content确实为center或对应值
移动端按钮顺序不是靠“居中”或“右对齐”解决的，而是靠源码顺序 + 断点级 order 控制。最容易被忽略的是：你写的 order-sm-2 在 iPhone 上根本不会执行，必须补上 order-2 才算真正生效。
