<div class="grid">
  <div class="box">1</div>
  <div class="box">3</div>
  <div class="box">2</div>
</div>
.grid {
  display: grid;
  justify-content: center;
  grid: repeat(2,100px) / repeat(2, 200px);
  grid-gap:20px;
}
.box {
  border:2px solid black;
}
.box:nth-child(3) {
  grid-row: 1/3;
  grid-column: 2;
}
@media (max-width: 700px) {
  .grid {
    grid: 50px 150px 50px / 200px;
  }
  .box:nth-child(3){
    grid-column:unset;
    grid-row:2;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.