Bootstrap怎么设置Flex项目在大屏排列并在大屏改变排列模式

必须显式添加 d-md-flex（或对应断点的 d-flex）才能使 flex-md-row 生效；仅写 flex-column flex-md-row 在中屏下仍为块级流，因 flex-md-row 仅设 flex-direction: row，不开启 Flex 上下文，需 d-flex 触发 display: flex。

必须显式加 d-md-flex（或对应断点的 d-*flex）才能让 flex-md-row 这类方向类生效；只写 flex-column flex-md-row，在中屏（sm/md）下大概率还是块级流，不是你想要的“大屏横排”。

为什么 flex-md-row 在大屏没反应

因为 flex-md-row 只设置 flex-direction: row，它不负责开启 Flex 上下文——这个活儿得由 d-md-flex 干。漏掉它，浏览器根本不会把容器当 Flex 容器渲染，所有方向、换行、对齐类全失效。

• 打开开发者工具，检查该元素的 Computed 样式里有没有 display: flex；没有，就是 d-*flex 类缺失
• 常见错误写法：class="flex-column flex-md-row" —— 缺 d-flex 或 d-md-flex，整个容器在 md 尺寸下仍是 display: block
• d-flex 本身无断点，d-sm-flex、d-md-flex 才是带断点的“开关”

d-flex flex-column flex-md-row 是最小可行组合

这是实现“小屏竖排、大屏横排”的最简且可靠写法，关键在类名顺序和断点连续性。

• d-flex：从 xs 起启用 Flex 布局
• flex-column：默认纵向主轴（xs 尺寸生效）
• flex-md-row：从 768px 起覆盖主轴为横向，且必须后置，否则被 flex-column 压制
• 别写 flex-column flex-lg-row：sm/md 区间断层，那一段尺寸下子项按文档流堆叠，布局失控

图文上下/左右切换要靠 flex-column-reverse + 断点方向覆盖

比如移动端图片在上、文字在下，桌面端左右并排——不能靠 order 或 JS，用 Flex 方向反转最干净。

• 结构保持语义顺序（先文字后图片），容器加：class="d-flex flex-column-reverse d-md-flex flex-md-row"
• 移动端：flex-column-reverse 让图片视觉上出现在文字上方
• 桌面端：d-md-flex 激活 Flex，flex-md-row 生效，自动取消 reverse 效果，恢复源码顺序
• 配合 col-md-6 控制宽度，确保两栏等宽并列；小屏下因是 column，自然堆叠

真正容易被忽略的是：Flex 工具类不是独立开关，它们全部依赖容器是否真实进入 Flex 上下文。嵌套结构里，父容器漏一个 d-md-flex，子项再怎么写 flex-md-wrap 都是白搭——computed 样式里看不到 display: flex，就等于没启动。