如何仅通过CSS调整元素顺序？不修改HTML实现指定排列

我们可以利用CSS的display: contents和order属性调整元素显示顺序，无需修改原有HTML结构：

.main {
  display: flex;
  flex-direction: column;
}

/* 让.inner-div的子元素直接纳入.main的布局流，跳过中间层级 */
.inner-div {
  display: contents;
}

/* 为每个.child-div指定显示顺序 */
.inner-div:last-child .child-div:first-child {
  order: 1;
}
.inner-div:first-child .child-div:first-child {
  order: 2;
}
.inner-div:last-child .child-div:last-child {
  order: 3;
}
.inner-div:first-child .child-div:last-child {
  order: 4;
}

原理说明 #

• display: contents会让.inner-div本身不生成布局盒子，它的子元素会直接成为父容器（.main）的布局子元素，这样我们就能通过.main的flex布局直接控制四个.child-div的顺序。
• order属性用于调整flex容器内元素的显示优先级，数值越小越靠前，通过为每个目标元素设置对应order值，就能得到想要的序列：Order 3 → Order 1 → Order 4 → Order 2。

也可以用CSS Grid布局实现，思路是将.main设为Grid容器，为每个.child-div指定网格行位置：

.main {
  display: grid;
}

.inner-div {
  display: contents;
}

.inner-div:last-child .child-div:first-child {
  grid-row: 1;
}
.inner-div:first-child .child-div:first-child {
  grid-row: 2;
}
.inner-div:last-child .child-div:last-child {
  grid-row: 3;
}
.inner-div:first-child .child-div:last-child {
  grid-row: 4;
}

两种方案都能满足需求，flex方案兼容性更广泛。

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