Bootstrap适配：桌面4列布局转移动端图文左右排列

用Bootstrap的栅格+弹性布局就能轻松实现这个需求，核心思路是针对不同屏幕断点切换布局方式：

实现代码 #

<div class="container">
  <div class="row">
    <!-- 第一个项目 -->
    <div class="col-md-3 mb-4">
      <div class="d-md-block d-flex align-items-center">
        <img src="你的图标地址" class="me-3 mb-md-3" alt="功能图标" style="width: 60px; height: 60px;">
        <div>
          <h6>功能标题</h6>
          <p>简短的功能描述文本</p>
        </div>
      </div>
    </div>
    <!-- 第二个项目 -->
    <div class="col-md-3 mb-4">
      <div class="d-md-block d-flex align-items-center">
        <img src="你的图标地址" class="me-3 mb-md-3" alt="功能图标" style="width: 60px; height: 60px;">
        <div>
          <h6>功能标题</h6>
          <p>简短的功能描述文本</p>
        </div>
      </div>
    </div>
    <!-- 第三个项目 -->
    <div class="col-md-3 mb-4">
      <div class="d-md-block d-flex align-items-center">
        <img src="你的图标地址" class="me-3 mb-md-3" alt="功能图标" style="width: 60px; height: 60px;">
        <div>
          <h6>功能标题</h6>
          <p>简短的功能描述文本</p>
        </div>
      </div>
    </div>
    <!-- 第四个项目 -->
    <div class="col-md-3 mb-4">
      <div class="d-md-block d-flex align-items-center">
        <img src="你的图标地址" class="me-3 mb-md-3" alt="功能图标" style="width: 60px; height: 60px;">
        <div>
          <h6>功能标题</h6>
          <p>简短的功能描述文本</p>
        </div>
      </div>
    </div>
  </div>
</div>

关键逻辑说明 #

• 桌面端（≥768px）：通过col-md-3实现4列均分布局，内部容器用d-md-block强制垂直排列，mb-md-3给图片下方加间距，保证图在上、文在下的效果。
• 移动端（<768px）：内部容器自动切换为d-flex align-items-center弹性布局，让图片和文字横向排列，me-3给图片右侧加间距，align-items-center确保文字和图标垂直居中对齐。
• 所有内容都在同一个列容器内，不用拆分图片和文字，断点切换时自动适配，不会出现对齐偏差。

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