核心问题是容器在中屏未启用flex布局，必须添加d-md-flex类才能使flex-md-row生效；正确写法是d-flex flex-column d-md-flex flex-md-row，并配合响应式gap和栅格类控制子项。
为什么加了 flex-column 和 flex-md-row 还是不换向
核心问题不是方向类写错了，而是容器根本没在中屏启用 Flex 布局。flex-md-row 只设置 flex-direction: row，但前提是容器有 display: flex。而 Bootstrap 不会自动给所有元素加这个声明——必须显式写 d-md-flex。
常见错误写法：<div class="flex-column flex-md-row"> —— xs 下是 block 流，<code>flex-column 完全不生效；md 下仍为 block，flex-md-row 也无效。
- 正确组合必须包含启用类：
d-flex flex-column d-md-flex flex-md-row -
d-flex让 xs 启用 Flex 并默认纵向（flex-column可省略，但建议保留以明确意图） -
d-md-flex是关键：它让 ≥768px 时重新声明display: flex，此时flex-md-row才能覆盖方向 - 验证方法：打开 DevTools，看 computed 样式里
display是否在 md 断点下变成flex
怎么让小屏垂直、大屏横向的同时控制子项间距
间距（gap）只在 Flex 或 Grid 容器中生效，且不能靠 mb-* 或 mr-* 混用——那样会在不同断点下导致间距叠加或错位。
- 统一用
gap-3（或gap-md-2、gap-lg-4）这类响应式 gap 类，它们会随断点自动切换 - 别在子项上单独加
mb-2：小屏 column 下可能重复加间隙，大屏 row 下又可能拉歪对齐 - 如果需要“小屏有 gap、大屏无 gap”，写
gap-3 gap-md-0，注意顺序：后写的覆盖前面的 -
gap对flex-column是垂直间距，对flex-row是水平间距，语义一致，不用额外判断
子项宽度在不同断点下如何保持合理比例
Flex 容器本身不规定子项宽度，只提供排列能力。如果你发现大屏横排时子项挤成一排、小屏竖排时又过宽，大概率是漏了宽度控制。
- 不要依赖
flex-grow-1均分：它会让所有子项强行拉满，容易在断点切换时高度突变 - 推荐搭配栅格类：
col-12 col-md-6 col-lg-4，写在子项上（不是 Flex 容器上） - 若子项是纯 div（非
.col），可用w-100 w-md-auto：小屏占满，大屏恢复内容自然宽度 - 避免在 Flex 容器上再套
.row：.row 已是 Flex，重复加d-flex可能干扰 gap 和对齐行为
容易被忽略的对齐冲突：比如 justify-content-between 在竖排时失效
当容器从 flex-row 切到 flex-column，主轴就从水平变成垂直。justify-content-between 的作用对象随之改变——它不再左右撑开，而是上下撑开，可能造成意外空白。
- 小屏竖排时，
justify-content-between很少适用；改用align-items-start或text-start控制子项内文本对齐 - 如果真需要竖排时两端对齐（比如首项顶上、末项贴底），得用
h-100+d-flex flex-column justify-content-between，并确保父容器有明确高度 - 更稳妥的做法是分层控制：Flex 容器管排列，子项内部用
text-center、ms-auto等微调对齐，避免把所有逻辑堆在容器上
<div class="d-flex flex-column d-md-flex flex-md-row gap-3 gap-md-4"> <div class="col-12 col-md-6 col-lg-4">内容1</div> <div class="col-12 col-md-6 col-lg-4">内容2</div> <div class="col-12 col-md-6 col-lg-4">内容3</div> </div>真正卡住人的从来不是“怎么写”，而是“为什么写了没反应”——绝大多数时候，缺的是那个不起眼的
d-md-flex。
