JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-6" style="background:#ff9999">
      Column 1
    </div>
    <div class="col-sm-4 col-xs-6" style="background:#99ff99">
      Column 2
    </div>
    <div class="col-sm-2 col-xs-6" style="background:#9999ff">
      Column 3
    </div>
    <div class="col-sm-2 col-xs-6" style="background:#ff99ff">
      Column 4
    </div>
  </div>
</div>

CSS

div {
  height: 100px;
  text-align: center;
  padding: 20px;
}