JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="container">

  <div id="isotope" class="row">

    <div class="item col-md-8">

      <img class="img-responsive" src="https://placehold.it/820x315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="https://placehold.it/820x315">

    </div>

    <div class="item col-md-8">

      <img class="img-responsive" src="https://placehold.it/820x630">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="https://placehold.it/410x315">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="https://placehold.it/410x315">

    </div>

    <div class="item col-md-4">

      <img class="img-responsive" src="https://placehold.it/410x315">

    </div>

  </div>

</div>

CSS

.item {
  margin-bottom: 10px;
  border: 2px solid #000;
}

JavaScript

var isotope = $("#isotope").isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.col-md-4'
  }
});