Semantic UI masonry grid (CSS)

HTML

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<div class="ui container">
  <div class="ui three column doubling stackable masonry grid">
    <div class="column">
      <div class="ui fluid card">
        <div class="image">
          <img src="http://semantic-ui.com/images/avatar2/large/kristy.png">
        </div>
        <div class="content">
          <a class="header">Kristy</a>
          <div class="meta">
            <span class="date">Joined in 2013</span>
          </div>
          <div class="description">
            Kristy is an art director living in New York.
          </div>
        </div>
        <div class="extra content">
          <a>
            <i class="user icon"></i>
            22 Friends
          </a>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="ui fluid card">
        <div class="content">
          <div class="right floated meta">14h</div>
          <img class="ui avatar image" src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> Elliot
        </div>
        <div class="image">
          <img src="http://semantic-ui.com/images/wireframe/image.png" class="ui wireframe image">
        </div>
        <div class="content">
          <span class="right floated">
            <i class="heart outline like icon"></i>
            17 likes
          </span>
          <i class="comment icon"></i>
          3 comments
        </div>
        <div class="extra content">
          <div class="ui large transparent left icon input">
            <i class="heart outline icon"></i>
            <input placeholder="Add Comment..." type="text">
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="ui fluid card">
        <div class="content">
          <img class="right floated mini ui image"...

CSS

body {
  background-color: #f9fafb;
  padding-top: 1rem;
}

.masonry.grid {
  display: block;
}

@media only screen and (min-width: 768px) {
  .masonry.grid {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }
  
  .ui.doubling.masonry.grid[class*="three column"] > .column {
    width: 100% !important;
  }
}

@media only screen and (min-width: 992px) {
  .masonry.grid {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}