title: Clear Rows When Doing Multi-responsive Columns - Bootstrap
body: <p>That title might not be very accurate but here is the situation:</p>
  
  <p><img src="https://i.stack.imgur.com/BjHa9.png" alt="The html that does not look proper">
  <img src="https://i.stack.imgur.com/Wf27F.png" alt="The view that does not look proper">
  As you can see in the HTML, The grid system goes from <strike>4 images on xl screens to</strike> 3 on lg screens to 2 on anything less.</p>
  
  <p>I am trying to get it to display properly - the proper amount of images at each screen size, that is. However, something funky is going on and can't quite figure it out using bootstraps classes. </p>
  
  <p>It seems to me that I would have to add rows dynamically at each break-point.</p>
  
  <p>Any suggestions?</p>
  
  <p><b>-- UPDATE --</b>
  Just realized that col-xl-* doesn't exist. However, that does not change the situation at all. Please disregard the xl declaration.</p>
  
  <p><b>-- UPDATE 2 --</b>
  Updated images.</p>
  
  <p><b>-- UPDATE 3 --</b>
  I'll try to clarify my goal. For that specific image attached in my post, I would like for 3 boxes to appear per row - not all helter skelter.</p>
  
  <p>When it collapses down to 2 boxes per row (xs device), I want to make sure every row has 2 boxes.</p>