JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box-container">
  <div id="box-column-left">
    <div id="box1"></div>
    <div id="box3"></div>
  </div>
  <div id="box-column-right">
    <div id="box2"></div>
    <div id="box4"></div>
  </div>
</div>

CSS

#box-container{
  display:flex;
  flex-flow:row wrap;
}

#box-column-left{
  width:100%;
}
#box-column-right{
  width:100%;
}

#box1{
  background-color:cyan;
  width:100%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:100%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:100%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:100%;
  height:150px;
  order:4;
}