Layout: Creating a responsive 3 card layout-CodePudding

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 >
    <div >Small card 1</div>
    <div >Big Card</div>
    <div >Small Crad 2</div>
</div>

Big Screens:

Medium & Small Screens:

CodePudding user response：

You should be able to accomplish what you want by adding a class like ".card" to all of your cards like the following:

<div >
    <div >Small card 1</div>
    <div >Big Card</div>
    <div >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 >
    <div >Small card 1</div>
    <div >Big Card</div>
    <div >Small Crad 2</div>
</div>