砌体和自举网格物品高度问题

Question

我有一个包含12个项目的引导网格。

网格位置5中的项目与网格的其余部分具有相当大的高度差异。

砌体奇怪地改变了这个特定项目在网格位置7的位置，它应该只是保留在它的原始位置。

反正有没有阻止砖石这样做？任何人都可以提供解决方案。

提前致谢。

HTML：

<div class="grid">
  <div class="grid-sizer col-xs-8 col-sm-4 col-md-2"></div>
  <div class="grid-item col-xs-8 col-sm-4 col-md-2">
    <!-- Below is just repeated by 12, the 5th item has a larger image height -->
    <div class="grid-item-content">
      <a href="#">
        <div>
          <img src="image.png" alt="masonry_image">
        </div>      
        <div class="bottom">
          <div>Test</div>
        </div>
      </a>
    </div>
  </div>
</div>

JS：

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

编辑：

我花时间创建这个jsfiddle以显示所描述的问题。

https://jsfiddle.net/cwiggo/uecLr08g/