JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <section class="container-fluid diamonds">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
          <div class="xsrow1">
            <div class="col-md-3 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
            <div class="col-md-3 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
          </div>
          <div class="col-md-3 col-xs-4 xsRow2Margin no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
          <div class="col-md-3 col-xs-4 xsRow2Margin no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
        </div>
      <div class="col-md-8 col-md-offset-2 mdrow2">
        <div class="col-md-4 col-xs-4 xsRow2Margin no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
        <div class="xsrow3">
          <div class="col-md-4 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
          <div class="col-md-4 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>
        </div>
      </div>
    </div>
  </section>

CSS

.no-padding {
  padding: 0!important;
  padding-right: 3px!important;
  padding-left: 3px!important;
  margin: 0!important;
}
.diamonds {
  position: relative;
}

.diamonds img {
  width: 100%;
  height: auto;
}

@media (max-width: 479px) {
  .xsRow2Margin {
    margin-top:-15.2%!important;
    margin-bottom:-15.2%!important;
  }
  .no-padding {
    padding-right: 2px!important;
    padding-left: 2px!important;
  }
}

@media (max-width: 991px) {
  .xsrow1 img, .xsrow3 img {
    width: 66%!important;
    height: auto;
  }
  .xsright {
    text-align: right;
  }
}

@media (min-width: 480px) and (max-width: 991px) {
  .diamonds {
    margin-left: 1%;
    margin-right: 1%;
  }
  .xsRow2Margin {
    margin-top:-15.9%!important;
    margin-bottom:-15.9%!important;
  }
}

@media (min-width: 992px) {
  .mdrow2 {
    position: absolute;
    top: 51%;
    left:0%;
    padding-left: 3%;
    padding-right: 3%;
  }
}