JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-wrapper">
  <div class="boxa">1</div>
  <div class="boxb">2</div>
  <div class="boxc">3</div>
  <div class="boxd">4</div>
</div>

CSS

.box-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal width columns */
  grid-template-rows: 1fr 1fr; /* 2 equal height rows */
  height: 70vh;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  padding: 5px;
  grid-template-areas: " first second last "
                       " first  third last ";
}

.boxa {
  grid-area: first;
  background: red;
}

.boxb {
  grid-area: second;  
  background: orange;
}

.boxc {
  grid-area: third;  
  background: lightgreen;
}


.boxd {
  grid-area: last;  
  background: grey;
}

@media ( max-width: 700px ) {
  
  .box-wrapper {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-areas: "  last   last  "
                           " first  second "
                           " first  third  ";      
      
  }
  
  
}

* {
  margin: 0;
  padding: 0;
}

.box-wrapper > div {
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}