reposition different divs differently - css

Question

I want to stack div differently for small screens and I want to use css for it.
What I want to achieve is following:
for one page, the div class="three has to go UNDER the .header
for another page (uses the same code), the div class="two" has to go ABOVE the .header
I only managed to make .two go above .header, but the result is that I cannot make the .three go below the .header on my other page (the actual result is that the .three is also placed ABOVE the .header because of my css code). How to fix?
#media(max-width: 460px) {
.container {
display: flex;
flex-direction: column;
}
.header {
order: 2;
}
}
<div class="body">
<div class='container'>
<div class='header'>
<div class="one">
one
</div>
hello
</div>
<div class='sidebar'>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</div>
</div>

Answer 1

Your two and three are within in a div called sidebar. You can't remove them from this div and order them with header using CSS because header is not the same level as them. You should possibly consider re-structuring your HTML?
I have amended your example slightly to show you what I mean.
.container {
display: flex;
flex-direction: column;
}
.header {
order: 2;
}
.two {
order: 1;
}
.three {
order: 3;
}
<div class="body">
<div class='container'>
<div class='header'>
<div class="one">
one
</div>
hello
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</div>

Answer 2

What you want is tricky because your HTML is grouping items two and three.
The very best solution is to rearrange your HTML.
Just in case that it is not possible, you can set a workaround with display: contents on the sidebar element (this makes the element disappear from the flow)
#media(max-width: 4600px) {
.container {
display: flex;
flex-direction: column;
background-color: lightblue;
}
.header {
order: 2;
}
.three {
order: 3;
}
.sidebar {
display: contents;
}
}
<div class="body">
<div class='container'>
<div class='header'>
<div class="one">
one
</div>
hello
</div>
<div class='sidebar'>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
</div>
</div>