Layout: Creating a responsive 3 card layout - css

Question

I am trying to achieve a layout where a big card is surrounded by 2 small cards in the same column but for medium & small screens to shift it be 2 columns one with the big card and the other containing only the 2 cards.
I don't know exactly how to structure my code in order to achieve this. Can anyone help plz?
Here is a snippet of what my code looks like
.container{
display: flex;
gap: 8px;
}
.small-card {
width: 200px;
height: 200px;
background-color: red;
}
.big-card {
height: 200px;
flex-grow: 1;
background-color: yellow;
min-width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="container">
<div class="small-card">Small card 1</div>
<div class="big-card">Big Card</div>
<div class="small-card">Small Crad 2</div>
</div>
Big Screens:
Medium & Small Screens:

Answer 1

You should be able to accomplish what you want by adding a class like ".card" to all of your cards like the following:
<div class="container">
<div class="card small-card">Small card 1</div>
<div class="card big-card">Big Card</div>
<div class="card small-card">Small Card 2</div>
</div>
And then use this media query:
#media screen and (max-width: 768px) {
.container {
flex-wrap: wrap;
}
.big-card {
width: 100%;
}
.container :nth-child(1){
order: 1;
}
.container :nth-child(3) {
order: 2;
}
.small-card {
flex-grow: 1;
}
}
.container{
display: flex;
gap: 8px;
}
.small-card {
width: 200px;
height: 200px;
background-color: red;
}
.big-card {
height: 200px;
flex-grow: 1;
background-color: yellow;
min-width: 250px;
}
#media screen and (max-width: 768px) {
.container {
flex-wrap: wrap;
}
.big-card {
width: 100%;
}
.container :nth-child(1){
order: 1;
}
.container :nth-child(3) {
order: 2;
}
.small-card {
flex-grow: 1;
}
}
<div class="container">
<div class="card small-card">Small card 1</div>
<div class="card big-card">Big Card</div>
<div class="card small-card">Small Crad 2</div>
</div>