JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px;
  grid-gap: .5em;
  padding: .5em;
  border: 1px solid black;
  grid-template-areas: " a b ";
}

#a { grid-area: a; }
#b { grid-area: b; }

@media ( max-width: 600px) {
  .container {
    grid-template-areas: " b " " a ";
    grid-template-columns: 1fr;
    grid-template-rows: 50px 50px;
  }
}

/* non-essential decorative styles */
#a     { background-color: lightgreen; }
#b     { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }