Masonry and Bootstrap Grid Item Height Issue

I have a bootstrap grid with 12 items. The item in grid position 5 has a considerable height difference to the rest of the grid. Masonry strangely alters the position of this particular item to grid position 7, where it should simply remain in it's original position. Is there anyway to stop masonry doing this? Can anyone offer a solution. Thanks in advance.

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row dashboard__display grid">
      
      <div class="col-sm-5 dashboard__display-item rounded grid-item">
    <div class="row dashboard__display-item-title">
        <span class="dashboard__display-item-title-text">{{title}}</span>
    </div>
    <div class="row dashboard__display-item-data">
        <div class="list-group">
            {{#datas}}
            <a href="{{link}}" class="list-group-item list-group-item-action">{{name}}</a>
            {{/datas}}
        </div>
    </div>
</div>
</div>