Flexbox Template

<!DOCTYPE html>
<html lang="en">
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width">
  <head>
    <style>
    body {
      margin: 0;
      padding: 0;
    }
    .wrapper {
      width: 100vw;
      height: 300vh;
      display: flex;
      justify-content: center
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 80%;
    }
    .box {
      box-sizing: border-box;
      border: 10px solid #fff;
    }

.group-1 {
      width: 100%;
      height: 20%;
    }
    .box-1 {
      background-color: orangered;
      height: 100%;
    }

.group-2 {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 30%;
    }
    .group-2-nest-2 {
      display: flex;
      flex-direction: column;
      width: 30%;
      height: 100%;
    }
    .box-2 {
      background-color: tomato;
      width: 70%;
      height: 100%;
    }
    .box-3 {
      background-color: coral;
      flex-basis: 100%;
      height: 50%;
    }
    .box-4 {
      background-color: darkorange;
      flex-basis: 100%;
      height: 50%;
    }

.group-3 {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 25%;
    }
    .box-5 {
      background-color: gold;
      width: 40%;
      height: 100%;
    }
    .box-6 {
      background-color: teal;
      width: 60%;
      height: 100%;
    }

.group-4 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      height: 25%;
    } 
    .box-7 {
      background-color: mediumaquamarine;
      flex-basis: 50%;
      height: 50%;
    }
    .box-8 {
      background-color: mediumturquoise;
      flex-basis: 50%;
      height: 50%;
    }
    .box-9 {
      background-color: mediumblue;
      flex-basis: 50%;
      height: 50%;
    }
    .box-10 {
      background-color: mediumorchid;
      flex-basis: 50%;
      height: 50%;
    }

@media screen and (max-width: 420px){ 
      .container {
        width: 100vw;
      }
      .group-1, .group-2, .group-2-nest-2, .group-3, .group-4 {
        flex-direction: column;
        width: 100%;
      }
      .group-4 {
        flex-wrap: nowrap;
      }
      .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10  {
        width: 100%;
        flex: 1;
      }
    }

</style>
  </head>
  <body>
    <div class='wrapper'>
      <div class='container'>

</div>
    </div>
  </body>
</html>