title: Use card columns without 'Masonry'-effect
body: <p><strong>Goal</strong><br>
  A) Neat rows of cards, without the 'Masonry'-effect<br>
  B) Different amount of cards per row depending on screen size<br><br></p>
  
  <p>I tried to solve the above by using <code>card-columns</code>, but I can't get it to work as I want it to (maybe <code>card columns</code> isn't the way to go?).</p>
  
  <p><i>A) I want...</i>
  <a href="https://i.stack.imgur.com/WuL17.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WuL17.png" alt="enter image description here"></a></p>
  
  <p><i>A) I <b>don't</b> want...</i>
  <a href="https://i.stack.imgur.com/XjJYV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XjJYV.png" alt="enter image description here"></a></p>
  
  <p><i>B) The below code does work (i.e. it changes the number of cards per row), but I get the 'Masonry'-effect.</i></p>
  
  <pre><code>@media (min-width: 576px) {
      .card-columns {
          -webkit-column-count: 2;
          -moz-column-count: 2;
          column-count: 2;
   }
  }
  
  @media (min-width: 768px) {
    .card-columns {
      -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3;
    }
  }
  
  @media (min-width: 992px) {
    .card-columns {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
    }
  }
  
  @media (min-width: 1200px) {
    .card-columns {
      -webkit-column-count: 5;
      -moz-column-count: 5;
      column-count: 5;
    }
  }
  </code></pre>