JSFiddle - React, Tailwind, and code Playground

by Igor_Ivancha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row hidden-xs">
    <div class="col-sm-3">left</div>
    <div class="col-sm-6">Center</div>
    <div class="col-sm-3">Right </div>
  </div>
  <div class="row visible-xs">
    <div class="col-xs-12">Center</div>
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
  </div>
</div>

CSS

.col-sm-3 {
  border: 1px solid black;
  height: 200px;
}

.col-sm-6 {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  height: 200px;
}
.col-xs-6, .col-xs-12 {
  border: 1px solid black;
  height: 200px;
}