使用CSS(不带JS)移动标记元素

Question

我有这个输出：

H1
H2
P

但我想在H2和p之间移动H1，所以新的输出是：

H2
H1
P

这可以用CSS网格或任何类型的CSS来完成吗？

代码(无法更改HTML结构(：

<div class="wrapper">
<h1>H1</h1>
<div class="details">
<h2>H2</h2>
<p>P</p>
</div>
</div>

Answer 1

使用display:contents"打开"内部div。并使用flexbox和order。

CSS网格选项也存在，但也需要display:contents。

.details {
display: contents;
}
.wrapper {
display: flex;
flex-direction: column;
}
h2 {
order: -1;
}

<div class="wrapper">
<h1>H1</h1>
<div class="details">
<h2>H2</h2>
<p>P</p>
</div>
</div>