JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>

CSS

.container {
  display: grid;
    grid-auto-columns: minmax(100px, 1fr);
    /* OR, to allow empty middle space to shrink below 100px: */
    /* grid-template-columns: repeat(3, minmax(100px, 1fr)) 1fr repeat(3, minmax(100px, 1fr)); */
    grid-template-areas: " item1 item2 item3 . item4 item5 item6 ";
    
}

@media ( max-width: 600px ) {
  .container {
        grid-template-areas:  " item4 item5 item6 "
                              " item1 item2 item3 ";
  }
}


.item--1 { grid-area: item1; background-color: orangered; }
.item--2 { grid-area: item2; background-color: yellowgreen; }
.item--3 { grid-area: item3; background-color: blueviolet; }
.item--4 { grid-area: item4; background-color: palevioletred; }
.item--5 { grid-area: item5; background-color: royalblue; }
.item--6 { grid-area: item6; background-color: goldenrod; }
.item--7 { grid-area: item7; background-color: crimson; }
.item--8 { grid-area: item8; background-color: darkslategray; }

.item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
}