如何用CSS调整body子元素顺序？实现Block B/A/C特定排序

核心思路 #

利用Flex布局的flex-wrap特性，结合多层容器的order属性调整视觉顺序，同时保证Block B和Block C始终属于其父容器。

固定HTML结构（不可修改） #

<body>
  <div id="blockA">Block A</div>
  <div class="parent">
    <div id="blockB">Block B</div>
    <div id="blockC">Block C</div>
  </div>
</body>

CSS代码实现 #

/* 把body设为Flex容器，开启换行模式 */
body {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

/* 让所有元素独占一行，保证垂直排列 */
#blockA,
.parent,
#blockB,
#blockC {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  margin: 0;
}

/* 父容器同样设为Flex容器，控制内部子元素的顺序 */
.parent {
  display: flex;
  flex-wrap: wrap;
  order: 1; /* 让父容器整体排在body的最前面 */
}

#blockB {
  order: 1; /* 在父容器内优先显示 */
}

#blockA {
  order: 2; /* 在body内排在Block B之后 */
}

#blockC {
  order: 3; /* 在父容器内排在Block A之后显示 */
}

原理说明 #

1. body作为最外层Flex容器，开启flex-wrap: wrap后，宽度100%的元素会自动换行，实现垂直排列效果。
2. 父容器.parent设置order: 1，保证它在body的视觉顺序中排在最前；同时父容器自身也是Flex容器，控制内部B和C的顺序。
3. 通过给#blockB、#blockA、#blockC设置不同的order值，让视觉顺序变为 Block B → Block A → Block C，且B和C始终属于父容器，DOM结构完全不变。

内容的提问来源于stack exchange，提问作者Mahmoud M. Abdelmalek