title: Bootstrap 4 - Masonry layout combined with the grid system (two, three, four and six column layout)
body: <p>I'm trying to combine a Masonry Layout whilst using the grid-system in Bootstrap 4. I want to achieve the following:</p>
  
  <ul>
  <li>Two column Masonry layout when in XS devices</li>
  <li>Three column Masonry layout when in SM devices</li>
  <li>Four column Masonry layout when in MD devices</li>
  <li>Six column Masonry layout when in XL devices</li>
  </ul>
  
  <p>I'm trying this code and combinations thereof:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="row card-columns"&gt;
  
              &lt;div class="col-6 col-sm-4 col-md-3 col-xl-2 card"&gt;                    
                  &lt;div class="card-body"&gt;Top&lt;br&gt;&lt;br&gt;&lt;br&gt;Bottom&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-6 col-sm-4 col-md-3 col-xl-2 card"&gt;
                  &lt;div class="card-body"&gt;Top&lt;br&gt;Bottom&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-6 col-sm-4 col-md-3 col-xl-2 card "&gt;
                  &lt;div class="card-body"&gt;Top&lt;br&gt;&lt;br&gt;Bottom&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-6 col-sm-4 col-md-3 col-xl-2 card"&gt;
                  &lt;div class="card-body"&gt;Top &amp; Bottom&lt;/div&gt;                   
              &lt;/div&gt;                    
  
      &lt;/div&gt;            
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I assume it fails because class row and card-columns can't probably be used together. Bootstrap documentation reads:</p>
  
  <blockquote>
    <p>Cards are built with CSS column properties instead of flexbox for
    easier alignment.</p>
  </blockquote>
  
  <p>Nesting the <em>card</em> divs in a <em>card-columns</em> div inside the <em>row</em> div doesn't work either. Any ideas are appreciated.</p>