JSFiddle - React, Tailwind, and code Playground

by Satheesh Kumar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class='row'>
<div class="col-sm-12 blue">

</div>
<div class="col-sm-6 black">

</div>
<div class="col-sm-3 yellow">

</div>
<div class="col-sm-3 red pull-right">

</div>
<div class="col-sm-9 green">

</div>
</div>

CSS

.blue {
  background: blue;
}
.black {
  background: black;
}
.yellow {
  background: yellow;
}
.red {
  background: red;
  min-height: 200px;
}
.green {
  background: green;
}
div {
  height: 100px;
}

@media (max-width: 768px) {
  .red {
    float: none !important;
  }
}