Bootstrap网格响应式列折叠：col类尺寸前缀组合使用方案咨询

要实现你需要的三种屏幕布局效果，核心是把每组纵向关联的内容（比如A/1/a、B/2/b这类）打包成独立列容器，再结合Bootstrap的断点前缀设置宽度：

布局逻辑拆解 #

1. 宽屏（xl及以上，≥1200px）：4列并排，每个列容器占12栅格系统中的3份，使用col-xl-3。
2. 较窄屏幕（md到xl之间，≥768px且<1200px）：2列并排，每个列容器占6份，使用col-md-6。
3. 最小移动端（<768px）：单列堆叠，每个列容器占12份，使用col-12（可简写为col）。

示例代码结构 #

<!-- 外层容器 -->
<div class="container">
  <!-- 行容器，Bootstrap要求列必须嵌套在row内 -->
  <div class="row">
    <!-- 第一组：A/1/a -->
    <div class="col-12 col-md-6 col-xl-3">
      <div>A</div>
      <div>1</div>
      <div>a</div>
    </div>
    <!-- 第二组：B/2/b -->
    <div class="col-12 col-md-6 col-xl-3">
      <div>B</div>
      <div>2</div>
      <div>b</div>
    </div>
    <!-- 第三组：C/3/c -->
    <div class="col-12 col-md-6 col-xl-3">
      <div>C</div>
      <div>3</div>
      <div>c</div>
    </div>
    <!-- 第四组：D/4/d -->
    <div class="col-12 col-md-6 col-xl-3">
      <div>D</div>
      <div>4</div>
      <div>d</div>
    </div>
  </div>
</div>

效果匹配说明 #

• 宽屏状态下，col-xl-3生效，四个列容器横向并排，内部内容纵向排列，正好对应你要的4列布局。
• 中等宽度屏幕时，col-md-6生效，四个列容器分成两行、每行两个，呈现2列布局的效果。
• 移动端时，col-12生效，所有列容器纵向堆叠，每组内容依次排列，符合单列显示要求。

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