Переместить элементы тега с помощью CSS (без JS)

Question

У меня есть этот вывод:

H1

H2

P

Но я хочу переместить H1 между H2 и P, поэтому новый вывод:

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 для "разворачивания" внутреннего блока ... и использование 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>