Switching the order of child elements on the body with CSS-CodePudding

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:

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

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

CodePudding user response：

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>