必须显式添加 d-flex 或带断点的 d-*flex 类（如 d-md-flex）才能启用 flex 上下文，否则仅写 flex-column flex-md-row 无效；方向类需后置以覆盖前序规则，且子项需配合栅格宽度控制布局。
必须显式加 d-flex 和带断点的 d-*flex 类，否则方向切换无效
只写 flex-column flex-md-row 不会生效——这些类只改 flex-direction，但前提是容器已声明 display: flex。而 Bootstrap 的 d-flex 本身没有响应式变体，d-sm-flex、d-md-flex 才是控制“何时启用 Flex”的开关。
常见翻车写法：<div class="flex-column flex-md-row"> —— 缺 <code>d-flex 或 d-md-flex，computed 样式里根本看不到 display: flex，整个 Flex 上下文都没建立，方向类全白写。
- 想 xs 就启用 Flex 并竖排：写
d-flex flex-column flex-md-row - 想仅从 md 起启用 Flex 横排：写
d-md-flex flex-md-row - 验证是否生效：打开开发者工具，检查 computed 样式中是否有
display: flex
方向类顺序决定覆盖逻辑，flex-md-row 必须后置
Bootstrap 的响应式 Flex 类是「覆盖式」生效：flex-column 在所有尺寸生效（默认纵向），flex-md-row 从 768px 起生效，并覆盖掉前面的 flex-column。但前提是它写在后面，否则会被压制。
错误写法：flex-md-row flex-column → flex-column 永远生效，flex-md-row 被忽略。
- 正确顺序：
flex-column flex-md-row（xs 竖排，md+ 横排） - 别写
flex-column flex-lg-row：sm/md 区间没覆盖，退回到 block 流，子项堆叠但不是 Flex 控制的竖排 - 如果要 sm 起横排，就用
flex-column flex-sm-row，别跳断点
子项宽度必须配合栅格类，否则大屏不换行或挤成一行
flex-wrap 和 flex-nowrap 可以控制换行，但它们不决定每行几个子项——那得靠子项自身的宽度基准。只靠 flex-grow-1 或没设宽度的 col，大屏下容易全部拉满一行，小屏才折行，达不到预期效果。
- 小屏堆叠 + 大屏并排：用
d-flex flex-column flex-md-row配合子项col-12 col-md-6 col-lg-4 - 避免滥用
flex-fill：它让子项均分剩余空间，但父容器宽度突变（如 sm→md）时，高度可能剧烈跳变 - 图文左右切换场景：用
d-flex flex-column-reverse flex-md-row，DOM 顺序不变，视觉自动反转再恢复
别在 .row 上重复加 d-flex，也别混用 justify-content-between 和 flex-column
.row 本身已是 Flex 容器，再套 d-flex 可能破坏栅格计算；而 justify-content-between 在 flex-column 下主轴变成垂直，会把内容上下撑开，造成意外空白。
- Footer 多栏小屏垂直：用
d-flex flex-sm-column，同时去掉justify-content-between，改用align-items-start - 按钮组小屏垂直、大屏水平：写
btn-group flex-column flex-md-row，不是btn-group-vertical - 嵌套结构里，父容器漏了
d-md-flex，子项再怎么加flex-md-wrap都是摆设
d-*flex，那一段尺寸就退回到普通流式布局——尤其在嵌套结构里，父容器没开 d-flex，子项加再多响应式类也没用。
