I am currently working on a layout with 4 divs using flexbox for alignment. On desktop size, the first and last divs take up the entire height of the container, while the second and third divs stack vertically in the center with each taking up 50% of the height.
For mobile size, I want to rearrange the layout so that the last div stretches across the entire width at the top, the first div aligns left underneath it taking up 50% of the width and remaining height, and the second and third divs stack vertically under the top one taking up the remaining 50% of the width and splitting the height equally between them.
Despite trying to adjust the media query settings and other properties like flex-direction, I have not been successful in achieving this layout as desired.
Below is a snippet of my code:
* {
margin: 0;
padding: 0;
}
.box-wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 70vh;
align-items
}
.boxa {
background: red;
flex: 0 0 100%;
width: 33%;
}
.boxb {
background: orange;
}
.boxc {
background: lightgreen;
}
.boxb,
.boxc {
flex: 0 0 50%;
width: 33%;
}
.boxd {
background: grey;
flex: 0 0 100%;
width: 33%;
}
@media (max-width: 700px) {
.boxa {
order: 2;
width: 50%;
flex: 0 0 75%;
}
.boxb {
order: 3;
width: 50%;
flex: 0 0 37.5%;
}
.boxc {
order: 4;
width: 50%;
flex: 0 0 37.5%;
}
.boxd {
order: 1;
flex: 0 0 25%;
width: 100%;
}
}<div class="box-wrapper">
<div class="boxa"></div>
<div class="boxb"></div>
<div class="boxc"></div>
<div class="boxd"></div>
</div>