JSFiddle - React, Tailwind, and code Playground

by Anand Guntadariya

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
!-- make container fluid -->
<div class="container-fluid">
  <div class="row">
    <!-- heading area: hexagon -->
    <div class="leftDiv">
      left
    </div>
    <div class="rightDiv">
      Right
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-2">
          <img src="http://www.kidsmathgamesonline.com/images/pictures/shapes/hexagon.jpg" class="hexImage">
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="container">
      <div class="col-sm-2">
        first Row
      </div>
    </div>
  </div>
</div>

CSS

.leftDiv,
.rightDiv {
  background: #F00;
}

.leftDiv {
  float: left;
}

.rightDiv {
  float: right;
}


/*==========  Mobile First Method  ==========*/


/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {}


/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {}


/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
  .leftDiv,
  .rightDiv {
    width: calc(50% - 768px/2);
  }
  .hexImage {
    width: 50px;
    height: 50px;
  }
}


/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
  .leftDiv,
  .rightDiv {
    width: calc(50% - 992px/2);
  }
  .hexImage {
    width: 70px;
    height: 70px;
  }
}


/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
  .leftDiv,
  .rightDiv {
    width: calc(50% - 1200px/2);
  }
}