Flow DIVs so that they use free space instead of just stacking - html

Question

I got four divs.
Div two is half the height of div 1, div 3 & 4 is half the height of div 2.
On a large display the placement of the divs are fine:
---------------- ---------- -------- --------
| | | Div 2 | | Div 3| | Div 4 |
| Div 1 | |________| ------- -------
| |
| |
----------------
On smaller screens I want the following layout:
---------------- ----------
| | | Div 2 |
| Div 1 | |________|
| | | Div 3 |
| | ----------
---------------- | Div 4 |
i.e. div 3 and 4 are placed under div 2.
But instead they are placed under div 1:
---------------- ----------
| | | Div 2 |
| Div 1 | |________|
| |
| |
----------------
-------- --------
| Div 3| | Div 4 |
------- -------
Is it possible to get the second alternative in some way? In my own attempts I have never got both the large screen and the smaller screen alternatives to work with the same code.

Answer 1

You could use the CSS property flexbox (MDN reference) to achieve this. See the example below (in full screen and stretch your screen).
While starting mobile first, you can work your way up and with setting media queries, you can easily modify the visual hierarchy of the boxes. First, put a display: flex; on the wrapper div and then on the desired breakpoint (here 480px), add another display: flex; on the .inner-wrapper.
Note: this is just a quick setup and there are many ways to do this.
.wrapper {
width: 100%;
height: 100vh;
display: flex;
}
.inner-wrapper {
width: 50%;
}
.box-large {
width: 50%;
height: 50%;
}
.box {
width: 100%;
height: 25%;
}
.box-small {
width: 100%;
height: 12.5%;
}
#media screen and (min-width: 480px) {
.inner-wrapper {
display: flex;
}
}
/* Visual stuff */
body {
margin: 0;
padding: 0;
}
.box-one {
background-color: red;
}
.box-two {
background-color: blue;
}
.box-three {
background-color: green;
}
.box-four {
background-color: yellow;
}
<div class="wrapper">
<div class="box-one box-large">red</div>
<div class="inner-wrapper">
<div class="box-two box">blue</div>
<div class="box-three box-small">green</div>
<div class="box-four box-small">yellow</div>
</div>
</div>