JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container1">
  <div class="container2">
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
  </div>
  <div class="box" id="b4"></div>
</div>

CSS

.container1 {
  display: flex;
  flex-flow: column;
}

.container2 {
  display: flex;
  flex-flow: row;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

#b1 {
  background-color: red;
}

#b2 {
  background-color: blue;
}

#b3 {
  background-color: green;
}

#b4 {
  background-color: yellow;
}

@media screen and (max-width:500px) {
.container2 {
  display: flex;
  flex-flow: column;
}
  #b1 {
    order: 1;
    -webkit-order: 1;
  }

  #b2 {
    order: 2;
    -webkit-order: 2;
  }

  #b3 {
    order: 4;
    -webkit-order: 4;
  }

  #b4 {
    order: 3;
    -webkit-order: 3
  }
}