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 |
>Solution :
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>