如何用纯CSS实现指定div布局及移动端响应式排序？

完全可以用纯CSS实现，推荐使用CSS Grid布局，既能满足桌面端的排列要求，又能轻松通过媒体查询调整移动端的顺序，具体实现如下：

HTML结构 #

<div class="container">
  <div class="box red">红色区块</div>
  <div class="box blue">蓝色区块</div>
  <div class="box green">绿色区块</div>
</div>

CSS代码 #

/* 基础样式 */
.box {
  padding: 20px;
  box-sizing: border-box;
}
.red { background-color: #ff4444; }
.blue { background-color: #4488ff; }
.green { background-color: #44dd44; }

/* 桌面端布局（示例断点设为768px） */
.container {
  display: grid;
  /* 第一列宽度由红色区块内容决定，第二列占剩余空间 */
  grid-template-columns: auto 1fr;
  /* 定义网格区域：红色占第一列两行，蓝绿占第二列上下两行 */
  grid-template-areas:
    "red blue"
    "red green";
  gap: 10px; /* 可选：添加区块间距 */
}
.red { grid-area: red; }
.blue { grid-area: blue; }
.green { grid-area: green; }

/* 移动端布局 */
@media only screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr; /* 单列布局 */
    grid-template-areas:
      "blue"
      "red"
      "green";
  }
}

方案说明 #

• 桌面端：通过Grid的区域定义，红色区块会占据左侧整列，蓝色和绿色区块自动在右侧上下排列，完全不受红色区块高度影响，无需使用clear: both。
• 移动端：仅需修改网格模板，重新定义区块的排列顺序，就能实现蓝→红→绿的单列布局，每个区块自动占满100%宽度。

如果不想用Grid，也可以结合Flexbox和媒体查询实现：

/* 桌面端Flex方案 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.red {
  flex: 0 0 auto;
  align-self: flex-start;
}
.blue, .green {
  flex: 1 1 calc(100% - 200px); /* 这里假设红色区块最大宽度为200px，若宽度不确定，Grid方案更优 */
}

/* 移动端布局 */
@media only screen and (max-width: 767px) {
  .container {
    flex-direction: column;
  }
  .blue { order: 1; }
  .red { order: 2; }
  .green { order: 3; }
}

不过Flex方案在红色区块宽度不确定时，右侧蓝绿区块的宽度计算会比较麻烦，因此优先推荐Grid方案。

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