JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="column">A1</div>
  <div class="column">A2</div>
  <div class="column">B1</div>
  <div class="column">B2</div>
</div>

CSS

.row {
  display: grid;
  grid-template-areas: " a1 b1 " 
                       " a2 b2 ";
}

@media ( max-width: 500px) {
  .row { grid-template-areas: " b1" "b2" "a1" "a2" ;}
}

.row> :nth-child(1) { grid-area: a1; }
.row> :nth-child(2) { grid-area: a2; }
.row> :nth-child(3) { grid-area: b1; }
.row> :nth-child(4) { grid-area: b2; }

/* just decorative styles */
.row {
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
.column {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgreen;
}