How to make a specific div go on top of another div - html

Question

I have two divs.
When resizing the browser, div 2 will go on the bottom, and div one will go on the top, something like the image below.
What I want is div 1 to go on the bottom and div 2 go on the top, basically the opposite of what it does. I know I can just put div 2 on the top in the html but I want the div 1 to stay on the left.
Current code:
.div1 {
width: 55%;
height: 80vh;
display: inline-block;
margin-right: 1.5vh;
min-width: 50vh;
}
.div2 {
width: 50vh;
height: 80vh;
display: inline-block;
}
<div class="div1">
</div>
<div class="div2">
</div>
Hope that makes sense, thx to everyone that helps in advance.

Answer 1

The simplest way is to make parent container as display: flex; and use flex-wrap: wrap-reverse;:
.div1 {
width: 55%;
height: 80vh;
display: inline-block;
margin-right: 1.5vh;
min-width: 50vh;
background-color: blue;
}
.div2 {
width: 50vh;
height: 80vh;
display: inline-block;
background-color: red;
}
.container
{
display: flex;
flex-wrap: wrap-reverse;
/* ignore below */
resize: both;
overflow: hidden;
border: 1px solid black;
padding: 1em;
}
<div class="container">
<div class="div1">
</div>
<div class="div2">
</div>
resize me
</div>

Answer 2

You can achieve this by combining two concepts: media queries and flexbox.
I've set the max-width of the screen size that the media query starts applying to 600px, but you can change this to whatever value (min or max) that you want. The switch in how the two divs render when in column-view is handled via flex-direction: column-reverse.
You'll need to wrap your divs in a parent container to apply them:
.container {
display: flex;
flex-direction: row;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
}
.div1 {
width: 55%;
height: 80vh;
display: inline-block;
margin-right: 1.5vh;
min-width: 50vh;
background: green;
}
.div2 {
width: 50vh;
height: 80vh;
display: inline-block;
background: orange;
}
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
You can read up on the two concepts I mentioned above in more detail:
media queries
flexbox