小屏幕下将堆叠元素移至新行的Bootstrap实现方案咨询

核心可以借助Bootstrap的响应式栅格系统，轻松实现两种布局的自适应切换；如果需要手动触发切换，也可以通过自定义类+简单JS实现。

一、响应式自动切换（基于屏幕尺寸） #

这是最贴合Bootstrap设计理念的方案，不同屏幕宽度下自动呈现你要的两种布局：

代码示例 #

<div class="container">
  <!-- 模块A -->
  <div class="row mb-3">
    <div class="col-12 bg-light p-3">
      模块A
    </div>
  </div>

  <!-- 模块B、C的响应式布局 -->
  <div class="row">
    <!-- 大屏幕和C同排，小屏幕独占一行 -->
    <div class="col-md-8 bg-info p-3">
      模块B
    </div>
    <!-- 大屏幕和B同排，小屏幕独占一行 -->
    <div class="col-md-4 bg-warning p-3">
      模块C
    </div>
  </div>
</div>

效果说明 #

• 当屏幕宽度≥768px（Bootstrap默认md断点）：B占8列、C占4列，自动处于同一行，对应你说的「B和C同div布局」；
• 当屏幕宽度<768px：B和C自动占满12列，各自单独成行，对应你说的「C单独新行布局」。

如果需要反过来（小屏幕同排、大屏幕C单独一行），只需调整栅格类：

<div class="row">
  <div class="col-8 col-md-12 bg-info p-3">模块B</div>
  <div class="col-4 col-md-12 bg-warning p-3">模块C</div>
</div>

二、手动触发切换（按需切换布局） #

如果不需要依赖屏幕尺寸，而是要手动控制两种布局的切换，可以用自定义类+JS实现：

代码示例 #

1. 自定义CSS

.layout-combined .col-custom {
  display: inline-block;
  width: auto;
  margin-right: 1rem;
}
.layout-separate .col-custom {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

2. HTML结构

<div class="container layout-separate" id="layoutWrap">
  <div class="row mb-3">
    <div class="col-12 bg-light p-3">模块A</div>
  </div>
  <div class="row">
    <div class="col-custom bg-info p-3">模块B</div>
    <div class="col-custom bg-warning p-3">模块C</div>
  </div>
</div>
<button onclick="toggleLayout()">切换布局</button>

3. 切换逻辑JS

function toggleLayout() {
  const wrap = document.getElementById('layoutWrap');
  wrap.classList.toggle('layout-combined');
  wrap.classList.toggle('layout-separate');
}

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