最简方式是给容器添加 d-flex flex-column 类；flex-column 须与 d-flex 配合使用，且必须加在直接父容器上，否则无效。
直接加 flex-column 就能改成纵向排列
Bootstrap 的弹性布局默认是水平（row）方向，想改垂直堆叠，最简方式就是给容器加 d-flex flex-column。注意：flex-column 本身不启用 Flex，必须搭配 d-flex（或带断点的 d-sm-flex 等），否则样式无效。
-
flex-column必须加在直接父容器上，比如<div class="d-flex flex-column">，不能只加在子元素上 <li>如果父容器是 <code>.row或.input-group，它们自带display: flex和固定flex-direction: row，会覆盖你的flex-column—— 此时得抽离结构，换成纯d-flex容器 - 纵向后，
justify-content-center控制的是子项在**纵轴上的居中**（即垂直居中），不是文字对齐；想文字居中还得单独加text-center -
flex-row-reverse：主轴仍是水平，但起点从右开始 →me-2（margin-end）实际作用在左边 -
flex-column-reverse：主轴仍是垂直，但起点从下开始 →mb-3（margin-bottom）实际变成“上边距” - 混用
flex-row-reverse和flex-column-reverse会导致浏览器无法确定主轴，行为不可靠，应避免 - 若需响应式翻转（如小屏倒序、大屏正序），用
flex-column-reverse flex-md-row，而不是靠order类——后者在断点切换时语义断裂，键盘导航和屏幕阅读器会错位 - 检查开发者工具的 Computed 样式：没有
display: flex，就说明缺d-*flex类 - 常见错误写法：
class="flex-column flex-md-row"→ 缺d-flex或d-md-flex，中屏下仍是块级流 - 正确最小组合：
class="d-flex flex-column flex-md-row"，其中flex-md-row后置才能覆盖flex-column - 别写
flex-column flex-lg-row：sm/md 断层，那一段尺寸下子项按文档流堆叠，布局失控 - 纵向分页：需自定义 CSS，且确保放在 Bootstrap CSS 之后，例如
.pagination { flex-direction: column !important; }（临时调试可用，上线建议提高选择器权重） - Modal 底部按钮右对齐：别用
float-end或ms-auto，它们在 flex 容器里失效；用<div class="d-flex justify-content-between w-100"> 包裹按钮 <li>按钮等宽需求：用 <code>flex-fill，比col-6更可靠，避免栅格嵌套冲突
真正容易被忽略的是：所有 Flex 工具类都只是“修饰”，不是“开关”。容器是否进入 Flex 上下文，全看有没有显式的
flex-row-reverse 和 flex-column-reverse 不是“微调”，是主轴翻转
这两个类会彻底改变主轴起点，影响所有依赖主轴的属性（如 order、margin 方向），不是简单“换个顺序”。
断点类必须配对使用，单写 flex-md-row 没用
flex-md-row 只设置 flex-direction: row，它不开启 Flex 上下文。如果容器没加 d-md-flex，那这个类根本不会生效。
分页、Modal 底部等内置组件要覆盖 CSS，不能只靠工具类
像 .pagination 或 .modal-footer 这类组件，内部已有高优先级的 Flex 声明，直接加 flex-column 工具类大概率被覆盖。
d-*flex 类——漏掉它，再多个方向类也白搭。
