flex-direction类没生效的根本原因是缺失d-flex类，因flex-类仅设置flex-direction而不启用flex上下文；必须显式添加d-flex或带断点的d-sm-flex、d-md-flex等才能使方向类生效。
flex-direction类没生效？先看d-*flex有没有漏
绝大多数“切换方向没反应”的问题，根本不是flex-column或flex-md-row写错了，而是容器压根没进入 Flex 上下文。Bootstrap 的方向类（flex-*）只设置flex-direction，不负责开启display: flex——这个必须靠d-flex或带断点的d-sm-flex、d-md-flex来提供。
常见翻车现场：<div class="flex-column flex-md-row"> —— 这在 sm/md 屏下仍是普通块级流，<code>flex-md-row完全被忽略。打开开发者工具检查 computed 样式，如果看不到display: flex，就说明d-*flex缺失。
- 想实现 xs 竖排、md+ 横排：必须写
d-flex flex-column d-md-flex flex-md-row - 想仅在 lg+ 启用横排：写
d-lg-flex flex-lg-row，别省略d-lg-flex - 嵌套结构里尤其要查父容器：子项加了
flex-sm-column，但父容器没d-sm-flex，照样白搭
order-*类在断点间语义断裂，慎用
用order-1把某个元素“提到最前”，在小屏生效，大屏却错位？这不是 bug，是order属性本身的局限：order只在当前主轴方向上调整顺序，而主轴方向由flex-direction决定。当容器从flex-column切到flex-row，order-1就从“从上往下第1个”变成“从左往右第1个”，源码顺序和视觉顺序彻底脱钩。
- 移动端图片在上、桌面端左右并排：优先用
d-flex flex-column-reverse d-md-flex flex-md-row，HTML 保持文字在前、图片在后 - 避免在
.row里对.col用order-sm-first：.row 虽默认 flex，但子项.col若未显式设d-flex，order类可能不触发 - 真要跨断点控制顺序，统一用方向类切换，别混用
order和flex-*
同一容器内方向类叠加顺序影响最终效果
Bootstrap 的 flex 工具类按书写顺序覆盖，后写的会覆盖前面同名属性。比如flex-column flex-md-row flex-xl-nowrap，在 xl 屏下既是横排（flex-md-row生效），又强制不换行（flex-xl-nowrap覆盖默认的flex-wrap）。
- 方向类（
flex-row/flex-column）和换行类（flex-wrap/flex-nowrap）可自由组合，但要注意断点前缀是否匹配 - 错误写法：
flex-column flex-lg-row→ sm/md 区间无d-*flex，也无方向类，回退为 block 流，出现“中间断层” - 正确覆盖逻辑：从小到大写
flex-column flex-sm-row，或从大到小写flex-lg-row flex-md-column，确保每个关键断点都有明确声明
图文上下/左右切换时，别在.row上重复加d-flex
.row本身已是display: flex容器，再给它加d-flex或d-md-flex看似无害，实则可能破坏栅格系统内置的负外边距（margin-left: -0.75rem等）抵消机制，导致列间距异常、内容溢出或右侧留白。
- 需要响应式方向切换，直接在
.row上加flex-column-reverse flex-md-row即可，无需额外d-flex - 如果
.row内部还要嵌套 flex 容器（如卡片内文字区需填满），在子容器上单独加d-flex flex-column和flex-grow-1，不要污染.row本身 - 验证方式：对比加
d-flex前后，computed 样式中margin-left是否被意外重置为0
d-*flex，或者在.row上多加一个d-flex，都可能让整个切换逻辑在某个断点下静默失效——它不会报错，只是默默退回文档流。
