How to change the order of divs in a 2x2 grid - html

Question

I am trying to make my 2x2 grid of divs take on a different order. I am trying to use flexbox for this.
I have tried to simplify my situation in a Codepen and I come quite far, yet I cannot perform the last step.
I want to swap number 2 and 3 so the order is goes from top right to top left.
Here is the code I use for the above output:
.container {
height: 600px;
width: 800px;
background-color: red;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.container2 {
// flex-direction: column-reverse <-- this does not work
}
.square {
font-size: 84px;
text-align: center;
margin: 20px;
background-color: green;
width: 300px;
height: 200px;
}
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square">
2
</div>
<div class="square">
3
</div>
</div>
</div>
Does anyone know a simple addition or, if necessary, a bigger change that will make this work?
Thanks in advance for your responses!
EDIT: Perhaps it is important to say that there will not always be 4 squares. 4 will be the maximum but there may also be 1, 2 or 3 squares.

Answer 1

You can manage this by manipulating the size of the overall container and adjusting the various flex-directions of each sub-container.
.container {
height: 180px;
width: 180px;
background-color: red;
display: inline-flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.container1 {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.container2 {
display: flex;
flex-direction: column-reverse;
}
.square {
font-size: 42px;
text-align: center;
background-color: green;
width: 50px;
height: 50px;
margin: 20px;
}
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square">
2
</div>
<div class="square">
3
</div>
</div>
</div>
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square">
2
</div>
</div>
</div>

Answer 2

why don't you use a simple approach?
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }
<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>

Answer 3

you can change the order of any flex child using order
check this to know more about flex in css
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
height: 600px;
width: 800px;
background-color: red;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.container1,.container2 {
display:flex;
flex-direction: column;
justify-content:flex-end;
}
.square {
font-size: 84px;
text-align: center;
margin: 20px;
background-color: green;
width: 300px;
height: 200px;
}
.order-1{
order:1;
}
.order-2{
order:2
}
<div class="container">
<div class="container1">
<div class="square">
0
</div>
<div class="square">
1
</div>
</div>
<div class="container2">
<div class="square order-2">
2
</div>
<div class="square order-1">
3
</div>
</div>
</div>