title: Bootstrap 4 aligning floats without clearfix
body: <p>However, as you can see, Bootstrap didn't properly align the div boxes together. There's a lot of blank spaces in between the boxes sometimes, which we doubt is caused by clearfix.</p>
  
  <p>So is there any way for us to get the proper 'float' aligning with each div box having the same spacing to the top? However, we can't really use the method of multiple 'row' divs or having clearfix divs in between because we're using VueJS's two-way for binding to render the page, which cannot count the times of iteration.</p>
  
  <p>EDIT: <a href="https://stackoverflow.com/questions/38058509/bootstrap-grid-with-different-image-heights">Bootstrap grid with different image heights</a> didn't solve this problem.</p>
  
  <pre><code>    @media (min-width: 768px) {
      .row &gt; .col-md-6:nth-child(2n+1) {
          clear: left;
       }
      } 
  </code></pre>
  
  <p>didn't solve the problem, nor can we use the clearfix class because of the  foreach loop used to generate html.</p>