Layout: Creating a responsive 3 card layout

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: