JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="one">I'm first</div>
  <div class="two">I'm second</div>
  <div class="three">I'm third</div>
  <div class="four">I'm fourth</div>
</div>

CSS

.container {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.one {
  flex: 1 0 50%;
  background: red;
}

.two {
  flex: 1 0 50%;
  background: orange;
}

.three {
  flex: 1 0 100%;
  background: yellow;
}
.four{
  flex: 1 0 20%;
  background: blue;
}

@media screen and (max-width: 531px) {
  .container {
    flex-wrap: nowrap;
  }
  .three {
    order: 2;
    flex: 1 0 auto;
  }
  .two {
    order: 4;
  }
  .one {
    order: 1
  }
  .four {
    order: 3
  }
}