JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div id="box-container">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

CSS

#box-container{
  display:flex;
  flex-flow: wrap;
}
#box1{
  background-color:cyan;
  width:50%;
  height:200px;
  order:1
}
#box2{
  background-color:magenta;
  width:50%;
  height:150px;
  order:2;
}
#box3{
  background-color:yellow;
  width:50%;
  height:100px;
  order:3;
}
#box4{
  background-color:black;
  width:50%;
  height:150px;
  margin-top: -50px;
  order:4;
}




@media screen and (max-width: 425px) {
  #box-container{

    flex-flow: row wrap;
  }
  
  #box4{

    margin-top: 0px;

  }

  #box1,#box2,#box3,#box4{
    width:100%;
  }
}