<div class="wrap">
  <div class="flex">
    <div class="box box01">01</div>
    <div class="box box02">02</div>
    <div class="box box03">03</div>
    <div class="box box04">04</div>
    <div class="box box05">05</div>
    <div class="box box06">06</div>
  </div>
</div>

.flex {
  &::before {
    content: "";
    order: -1;
    width: 100%;
  }
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  padding: 0 20px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  min-height: 100px;
  width: 10vw;
  height: 10vw;
  font-size: max(48px, 3vw);
  font-weight: 700;
  color: #000;
  border: max(10px, 2vw) solid;

  &01,
  &02,
  &03,
  &04 {
    order: -2;
  }

  &03 {
    justify-items: center;
  }

  &01 {
    border-color: red;
  }

  &02 {
    border-color: blue;
  }

  &03 {
    border-color: green;
  }

  &04 {
    border-color: yellow;
  }

  &05 {
    border-color: black;
  }

  &06 {
    border-color: pink;
  }
}

@media screen and (min-width: 768px) {
  .flex {
    width: 50vw;
  }
}