Isotope/Masonry images overlapping on resize

I am using bootstrap and isotope to create a filterable responsive grid, however, my images are getting overlapped on resize. I am using DeSandro's imagesLoaded so that images don't overlap on load.

Resizing the example below will make the .col-md-4 divs to overlap. Any idea why this is happening?

Example here.

.col-md-4 Items overlapping:

I have the following HTML:

<div class="container">

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

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

      <img class="img-responsive" src="http://lorempixel.com/820/315">

    </div>

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

      <img class="img-responsive" src="http://lorempixel.com/820/315">

    </div>

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

      <img class="img-responsive" src="http://lorempixel.com/820/630">

    </div>

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

      <img class="img-responsive" src="http://lorempixel.com/410/315">

    </div>

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

      <img class="img-responsive" src="http://lorempixel.com/410/316">

    </div>

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

      <img class="img-responsive" src="http://lorempixel.com/410/317">

    </div>

  </div>

</div>

And this is my JS:

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

isotope.imagesLoaded(function() {
  isotope.isotope('layout');
});