如何用CSS为已有的响应式布局添加Block3并调整位置？

其实你只需要在现有基础上添加Block3，并调整它的宽度属性，再优化一下细节就能实现需求啦，具体步骤如下：

核心思路 #

• 桌面端：Block3需要占据整行宽度，所以设置它的width: 100%，利用flex-wrap的换行特性，它会自动排在Block1和Block2的下方。
• 移动端：因为你已经给container设置了flex-direction: column-reverse，Block1和Block2的顺序会反转，而Block3本身就在HTML结构的最后，所以移动端会自动呈现「Block2 → Block1 → Block3」的顺序。
• 额外优化：给所有区块加上box-sizing: border-box，避免内边距或边框导致宽度溢出，保证布局更稳定。

修改后的完整代码 #

CSS 代码 #

* {
  box-sizing: border-box; /* 全局设置盒模型，避免宽度溢出 */
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.block1 {
  width: 66%;
  /* 可选：添加样式方便可视化效果 */
  background: #f0f0f0;
  padding: 1rem;
}

.block2 {
  width: 33%;
  /* 可选：添加样式方便可视化效果 */
  background: #e0e0e0;
  padding: 1rem;
}

.block3 {
  width: 100%; /* 桌面端占满整行 */
  /* 可选：添加样式方便可视化效果 */
  background: #d0d0d0;
  padding: 1rem;
}

@media (max-width: 580px) {
  .block1, .block2, .block3 {
    width: 100%; /* 移动端所有区块占满屏幕宽度 */
  }
  .container {
    flex-direction: column-reverse;
  }
}

HTML 代码 #

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
  <div class="block3">Block 3</div>
</div>

效果验证 #

• 桌面端：Block1占据左侧2/3宽度，Block2在右侧1/3宽度，Block3在两者下方整行显示，完全匹配你的布局需求。
• 移动端：屏幕宽度小于580px时，Block2会排在最上方，接着是Block1，最后是Block3，所有区块都占满屏幕宽度。

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