change block order with flex - html

Question

How to do this kind of markup? So when the resolution is lower than 640px the container number 2 goes to the bottom.
I know that I should use #media (max-width:600px) {}
but I don't really understand how to get the block #2 to bottom from "column right"
Thanks
My example fiddle is https://jsfiddle.net/benderlio/tewzvLxf/3/
#container {
display: flex;
}
.column.left {
width: 60%;
flex: 0 0 1;
background-color: red;
}
.column.right {
padding-top: 30px;
text-align: center;
width: 40%;
flex: 0 0 1;
}
.box {
border: 1px solid red;
margin: 20px;
padding: 20px;
}
<div id="container">
<div class="column left">
</div>
<div class="column right">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</div>

Answer 1

I would use grid with a media query and removing the column divs:
* {
box-sizing: border-box;
}
#container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"a b"
"a c"
"a d";
}
.box {
border: 1px solid red;
margin: 20px;
padding: 20px;
}
.box1 {
grid-area: a;
}
.box2 {
grid-area: b;
}
.box3 {
grid-area: c;
}
.box4 {
grid-area: d;
}
#media (max-width:640px) {
/* adding the commented out areas will allow box1 to keep it's height like in your images so there is a space below box 4 */
#container {
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-areas:
"a b"
"a d"
/* "a ." */
"c c";
}
}
<div id="container">
<div class="box box1">
1
</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>

Answer 2

You can do it without changing your structure, like this
#media only screen and (max-width: 640px) {
#container {
flex-direction: column-reverse;
}
}
You can set the flex-direction to have a reverse outcome on columned box.
EDIT
So after the confusion was set out, this is the least I can think of to closely produce what you want. You need to set the container's position to be relative and set the 2nd box's position to be absolute, but this rather a dirty way to do it.
body {}
#container {
display: flex;
}
.column.left {
width: 60%;
flex: 0 0 1;
background-color: red;
}
.column.right {
padding-top: 30px;
text-align: center;
width: 40%;
flex: 0 0 1;
}
.box {
border: 1px solid red;
margin: 20px;
padding: 20px;
}
#media only screen and (max-width: 640px) {
#container {
position: relative;
}
.box:nth-child(2) {
width: 90%;
position: absolute;
bottom: -100px;
left: -20px;
}
}
<div id="container">
<div class="column left">
1
</div>
<div class="column right">
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>