Move tag elements using CSS (without JS)

Question

I have this output:

H1

H2

P

But I want to to move H1 between H2 and P so the new output is:

H2

H1

P

Can this be done with CSS grid or any type of CSS?

Code (Changing HTML structure is not possible):

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

Not without changing the HTML structure or using display:contents. — Paulie_D
– Paulie_D, Commented Apr 23, 2020 at 10:42
@Paulie_D Changing the HTML is not possible, can you help me with the CSS? — babarosa83
– babarosa83, Commented Apr 23, 2020 at 10:51

Paulie_D · Accepted Answer · 2020-04-23 10:57:42Z

1

Using display:contents to "unwrap" the inner div..and the use flexbox and order.

CSS-Grid options also exist but also require 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>

answered Apr 23, 2020 at 10:57

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I was not even aware with display: contents yet, feeling foolish, but thanks to you, it's magical.