<p>必须显式添加带断点的 d-flex 类（如 d-md-flex）才能启用 Flex 布局，否则 flex-md-row 等方向类无效；正确写法为 class="d-flex flex-column flex-md-row"，靠后置断点类覆盖前序方向，并配合 col- 宽度类控制换行。</p>
直接写 flex-row 或 flex-column 不会随屏幕变化切换方向——必须搭配带断点的 d-*flex 类，否则 Flex 根本没启用，方向类全失效。
为什么 flex-md-row 在中屏没生效？
最常见原因是容器没加对应断点的 d-flex。Bootstrap 的 Flex 工具类（如 flex-md-row）只设置 flex-direction，但前提是父容器已声明 display: flex。
-
flex-md-row本身不触发 Flex 布局，它只是“如果已是 Flex 容器，就设主轴为 row” - 必须显式写
d-md-flex（≥768px 启用 Flex），或d-flex d-md-flex（xs 启用 + md 继续启用） - 检查浏览器开发者工具的 computed 样式：若没有
display: flex，说明d-*flex类缺失
怎么让小屏竖排、大屏横排？
靠类名覆盖机制实现，不是靠媒体查询，也不需要 JS。关键在顺序和断点连续性。
- 写法：
class="d-flex flex-column flex-md-row" -
flex-column在所有尺寸生效（默认纵向） -
flex-md-row从 768px 起覆盖主轴方向为横向，且必须后置，否则被前面的flex-column压制 - 不要写
flex-column flex-lg-row：sm/md 断层，中间尺寸仍是 column
Flex 容器响应式换行怎么控制？
flex-wrap 和 flex-nowrap 也需带断点，且要和子项宽度类配合，否则换行逻辑不可控。
- 想小屏堆叠、大屏并排：
flex-wrap flex-md-nowrap - 但仅这样不够：如果子项没设宽度（比如只用
flex-grow-1），大屏下仍可能全部挤一行，小屏才折行 - 必须配合栅格宽度类，例如：
col-12 col-md-6 col-lg-4，让子项在不同断点有明确宽度基准 -
flex-fill要慎用——它会让子项均分剩余空间，但父容器宽度突变时（如从 sm 切到 md），高度容易剧烈跳变
真正容易被忽略的是：Flex 方向类（flex-row 等）和换行类（flex-wrap 等）可以叠加，但后写的同名属性会覆盖前面的；而 d-flex 类本身无断点，d-sm-flex、d-lg-none 才是带断点的完整开关——漏掉任何一个断点的 d-*flex，那一段尺寸就退回到普通流式布局。
