JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c">
  <div class="i i1"></div><br class="br-1">
  <div class="i i2"></div><br class="br-2">
  <div class="i i3"></div>
</div>

CSS

body {margin: 0;}
.c {
  display: inline-block;
  background-color: #ddd;
}

.i {
  float: left;
  width: 200px;
  height: 40px;
  background-color: #aaa;
}

.i1 {background-color: #aaa;}
.i2 {background-color: #bbb;}
.i3 {background-color: #ccc;}

br {display: none;}

@media only screen and (max-width : 600px) {
  .br-2 {
    display: block;
  }
}

@media only screen and (max-width : 400px) {
  .br-1 {
    display: block;
  }
}