CODEWITHSUNDEEP
htmlcss
Mahmoud M. Abdelmalek
Mahmoud M. Abdelmalek

Reputation: 25

Switching the order of child elements on the body with CSS

Short Story Let's say my HTML is already set in stone:

<body>

<div id="blockA">Block A</div>

<div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>
</div>

</body>

It will look like this:

| Block A | | Block B | | Block C |

These are display flex and I was able to change the order using order: 0; and order: 1; and It's now look like this

| Block B | | Block C | | Block A |

Now I want to switch the order of the blocks. How can I do that with only CSS? Kindly note that B and C are on the div and cannot be separated

| Block B | | Block A | | Block C |

Upvotes: 0

Views: 30

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

You need to "unwrap" the other divs using display:contents.

body {
  display: flex;
}

div {
  border: 1px solid grey;
}

#wrap {
  display: contents;
}

#blockB {
  order: -1;
}
<div id="blockA">Block A</div>

<div id="wrap">
  <div id="blockB">Block B</div>
  <div id="blockC">Block C</div>
</div>

Upvotes: 3

Related Questions