Need to make row-column-row using css flexbox - html

Question

I want to make a row-column-row layout using css flexbox, here's the code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 0.2%;
}
.box {
color: white;
background: royalblue;
min-height: 100px;
min-width: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
.b1 {
flex: 1 0 80%;
}
.b2 {
flex: 1 1 auto;
}
.b3 {
flex: 1 0 100%;
}
<div class="container">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
</div>
This is what I want:
And on mobile I want something like this:
But as you can see in the code, the column is not growing vertically and I cannot even use margins or gaps in between the divs.
Any suggestions will be appreciated. CSS-Grid solutions are also welcome.

Answer 1

A grid-based approach using a media query:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 4fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"b1 b2"
"b3 b2";
gap: 0.2%;
}
#media screen and (max-width: 480px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"b1"
"b2"
"b3";
}
}
.box {
color: white;
background: royalblue;
min-height: 100px;
min-width: 100px;
border: 1px solid;
}
.b1 {
grid-area: b1;
}
.b2 {
grid-area: b2;
}
.b3 {
grid-area: b3;
}
<div class="container">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
</div>