使用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

您可以轻松实现此功能。尝试根据需要订购它们。

#wrapper {
  display: flex;
Flex-direction: column;
}

<div id="wrapper">
  <h1 style="order: 2;">H1</h1>
  <h2 style="order: 1;">H2</h2>
  <p style="order: 3;">P</p>
</div>

Answer 2

使用display: flex。然后，您可以使用order属性更改元素的视觉顺序。

#wrapper {
  display: flex;
}

<div id="wrapper">
  <h1 style="order: 2;">H1</h1>
  <h2 style="order: 1;">H2</h2>
  <p style="order: 3;">P</p>
</div>