<div class="wrap">
  
  <div class="item">1</div>
  <div class="item box2">2</div>
  <div class="item box3">3</div>


  
</div>

body {
  margin: 0;
  background: url(https://images.unsplash.com/photo-1586763209828-f0fa0773f19e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-position: 50%;
  font-family: sans-serif;
}
.wrap{
  display:flex;
  height: 220px;
  flex-direction: column;
  flex-wrap: wrap;
}
.item{
  border: 2px dashed yellow;
  color: yellow;
  background-color: #f992;
  width: calc(50% - 14px);
  height: calc(50% - 14px);
  margin: 5px;
  text-align:center;
  font-weight:bold;
  font-size:20px;
  display:flex;
  align-items: center;
  justify-content: center;
}
.box2 {
  order: 3;
  height: 100%;
}
.box3 {
  order: 2;
}
@media screen and (max-width: 600px) {
  .wrap {
    flex-wrap: nowrap;
  }
  .item{
    width: calc(100% - 14px);
  }
  .box2 {
  order: 2;
  height: calc(50% - 14px);
}
.box3 {
  order: 3;
}
}