如何在小屏幕自动堆叠三部分内容？能否用纯CSS实现？

你要的布局效果完全可以通过CSS Grid结合媒体查询（@media）实现，不需要借助JavaScript。下面是具体的实现代码：

HTML结构 #

<div class="layout-container">
  <div class="module-left">左侧模块</div>
  <div class="module-middle">中间模块</div>
  <div class="module-right">右侧模块</div>
</div>

CSS代码 #

/* 基础布局容器样式 */
.layout-container {
  display: grid;
  /* 宽屏布局：左右固定200px，中间最小800px，剩余空间由中间模块填充 */
  grid-template-columns: 200px minmax(800px, 1fr) 200px;
  gap: 16px; /* 可选：模块间的间距 */
}

/* 模块基础样式（仅为可视化，可根据需求修改） */
.module-left, .module-middle, .module-right {
  padding: 20px;
  border-radius: 4px;
}
.module-left { background: #f0f0f0; }
.module-middle { background: #e0e0e0; }
.module-right { background: #d0d0d0; }

/* 小屏幕适配：屏幕宽度小于1000px时切换布局 */
@media (max-width: 999px) {
  .layout-container {
    /* 垂直堆叠，单列占满宽度 */
    grid-template-columns: 1fr;
    /* 自定义区域顺序：中间模块最上方，然后左侧、右侧 */
    grid-template-areas: 
      "middle"
      "left"
      "right";
  }

  /* 给每个模块指定区域 */
  .module-left { grid-area: left; }
  .module-middle { grid-area: middle; }
  .module-right { grid-area: right; }
}

关键逻辑说明 #

1. 宽屏布局：通过grid-template-columns: 200px minmax(800px, 1fr)实现左右固定宽度，中间模块最小宽度800px，当屏幕宽度超过1200px（200+800+200）时，中间模块会自动填充剩余空间。
2. 小屏幕切换：当屏幕宽度小于1000px时，通过媒体查询将布局改为单列，同时利用grid-template-areas重新定义模块的堆叠顺序，让中间模块优先显示在顶部。
3. 若之前尝试Grid方案失败，大概率是没正确用grid-template-areas控制顺序，或者minmax参数设置不符合需求，也可能是媒体查询断点设置有误（比如用了max-width: 1000px，但此时200+800+200=1200已超过屏幕宽度，所以断点设为999px更准确）。

内容的提问来源于stack exchange，提问作者Marc K.