flexbox: Combining column and row

Use media query to try and add a third row after the green div

by lukindo mbuli

HTML

<div class="container">
  <div class="box-1"></div>
  <div class="smaller-container">
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-4"></div>
  </div>
  <div class="box-5"></div>

</div>

CSS

/*Basic Reset*/
   
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html,
   body {
     height: 100%;
   }
   
   body {
     max-width: 1366px;
     margin: auto;
     width: 100%;
   }
   
   .container {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
   }
   
   .box-1 {
     order: 1;
     background-color: red;
     height: 150px;
     width: 50%;
   }
   
   .smaller-container {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     width: 50%;
     order: 2;
   }
   
   .box-2 {
     order: 3;
     background-color: blue;
     height: 75px;
     width: 100%;
   }
   
   .box-3 {
     order: 4;
     background-color: green;
     height: 75px;
     width: 100%;
   }
   
   .box-4 {
     order: 5;
     width: 100%;
   }
   
   .box-5 {
     order: 6;
     background-color: orange;
     height: 150px;
     width: 100%;
   }
   
   @media screen and (max-width: 1000px) {
     .box-2 {
       height: 50px;
     }
     .box-3 {
       height: 50px;
     }
     /******* Here we swap the empty div that hasbeen existing in the smaller container
with an outer div ********/
     .box-5 {
       order: 5;
       height: 50px;
     }
     .box-4 {
       order: 6;
       background-color: purple;
       height: 150px;
     }
   }