在Bootstrap 5中同时使用col与d-flex类是否合法？

答案：完全可以 #

col类是Bootstrap网格系统的核心，用来定义响应式布局下的元素宽度与排版规则；d-flex则是启用Flexbox布局的开关，用于实现内部元素的对齐、分布等灵活排版需求。二者功能互补，不存在冲突，Bootstrap本身就支持这类工具类的自由组合。

针对你的居中需求优化 #

你的目标是让.description元素居中，当前代码已经能实现效果，但可以简化结构，减少嵌套层级：

1. 父级的col-md order-md-1 d-flex flex-wrap align-items-center已经实现了垂直居中，只需要再加一个justify-content-center就能实现水平居中，不需要额外嵌套一层row；
2. .description的col-xxl-8用来控制其最大宽度，配合text-center实现文本居中，这个逻辑可以保留。

优化后的代码：

<section class="container-fluid mb-5">
  <div class="row">
    <div class="col-md order-md-1 d-flex flex-wrap align-items-center justify-content-center">
      <div class="description col-xxl-8 text-center p-5">
        <h2 class="display-5">Museum of Candy</h2>
        <img src="imgs/lolli_icon.png" alt="" class="d-none d-xl-inline-block">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit pariatur libero repellat earum, atque sint perferendis nostrum rem? Labore nemo molestias at ipsum exercitationem dignissimos doloremque cupiditate dolore, saepe atque!</p>
      </div>
    </div>
    <div class="col-md px-0 order-md-0">
      <img src="imgs/milk.png" alt="" class="img-fluid">
    </div>
  </div>
</section>

额外提示 #

Bootstrap的工具类设计就是为了自由组合，只要功能不冲突（比如不会同时设置互相矛盾的布局规则），都可以放心搭配。如果后续遇到布局异常，用浏览器开发者工具检查元素样式，排查是否有自定义样式或者其他类的优先级冲突即可——col和d-flex本身的样式规则不会互相覆盖。

内容的提问来源于stack exchange，提问作者Husky