d-lg-block会“关掉”Flex布局，因为它在≥992px时将display设为block，覆盖d-flex等flex类的display:flex声明；二者在同一断点混用会导致flex行为完全失效。
为什么 d-lg-block 会“关掉” Flex 布局？
因为 d-lg-block 显式把元素的 display 设为 block，直接覆盖了之前生效的 d-flex 或 d-md-flex 所设置的 display: flex —— CSS 层叠规则里，后声明、更具体的样式胜出。
常见错误场景：
- 写成
class="d-flex d-lg-block"：在 ≥992px 屏幕下，d-lg-block生效，容器变回block，子项立即失去 flex 行为（flex-direction、justify-content全失效） - 误以为
d-lg-block是“仅在大屏显示”，却没意识到它同时重置了 display 类型 - 和响应式方向类混用，比如
class="d-flex flex-column flex-lg-row d-lg-block"：最后这个d-lg-block把前面所有 flex 设置都干掉了
d-*-flex 和 d-*-block 能不能共存？
技术上可以写在一起，但逻辑上冲突——它们是互斥的 display 值。浏览器只会应用最终计算出的那个 display 值。
关键判断点：
-
d-flex→display: flex -
d-lg-flex→display: flex（仅 ≥992px） -
d-lg-block→display: block（仅 ≥992px） - 如果两者都在 class 中，且断点相同（如都是
lg），则按 HTML 中出现顺序决定谁赢；但 Bootstrap 官方 CSS 文件里d-lg-block的声明位置靠后，通常会胜出
想让大屏用 Flex、小屏用 Block，怎么写才对？
必须用「断点错开」或「显式启用」的方式，避免在同一断点上同时声明互斥 display 值。
推荐写法：
-
class="d-flex d-lg-flex"：xs–md 用d-flex（即全尺寸 Flex），lg+ 继续 Flex（冗余但安全） -
class="d-block d-md-flex"：xs 用block，≥768px 启用 Flex（这才是“小屏块级、大屏弹性”的本意） - 绝对不要写
d-flex d-lg-block—— 这等于告诉浏览器：“请先设 flex，再立刻改成 block”，白忙一场
真正容易被忽略的是：Bootstrap 的 display 工具类不是“开关叠加”，而是“逐断点覆盖”。你写的每一个 d-*-xxx 都是在某个断点下单独控制 display 值，没有“保留之前状态”的智能逻辑。漏看一个断点，或者多加一个冲突类，整个布局就退回到文档流。
