Bootstrap 4 Collapse with Masonry

Attempting to get the collapse to readjust the masonry layout in the height direction.

by Glynne Turner

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="container">
  <div class="row" id="cards">
    <div class="col-sm-4 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab" id="card-1">
            <h3 class="card-title">Lorem ipsum dolor sit amet</h3>
            <a data-toggle="collapse" data-parent="#cards" href="#item-1" aria-expanded="true" aria-controls="item-1" class="btn btn-primary">
							Click me
						</a>
          </div>
          <div id="item-1" class="collapse" role="tabpanel" aria-labelledby="card-1">
            <p>With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab" id="card-2">
            <h3 class="card-title">Nulla ex lectus, congue sed dignissim ac</h3>
            <a data-toggle="collapse" data-parent="#cards" href="#item-2" aria-expanded="true" aria-controls="item-2" class="btn btn-primary">
							Click me
						</a>
          </div>
          <div id="item-2" class="collapse" role="tabpanel" aria-labelledby="card-2">
            <p>With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 card-item">
      <div class="card">
        <div class="card-block">
          <div role="tab" id="card-3">
            <h3 class="card-title">Mauris tincidunt ante ante, ac semper sem euismod vitae</h3>
            <a data-toggle="collapse" data-parent="#cards" href="#item-3" aria-expanded="true" aria-controls="item-3" class="btn btn-primary">
							Click me
						</a>
          </div>
          <div id="item-3" class="collapse" role="tabpanel"...

SCSS

.container {
	margin: 30px auto;
}

.card-item {
	margin-bottom: 30px;
	P {
		margin: 10px 0 0 0;
	}
}

.btn-primary {
	&:focus {
		color: #fff;
	}
}