title: Bootstrap responsive grid issue
body: <p>I've setup a bootstrap grid <a href="https://vatnaland.no" rel="nofollow noreferrer">like so</a>:</p>
  
  <pre><code>&lt;div class="row"&gt;
  
   &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"&gt;
    &lt;!-- content --&gt;
   &lt;/div&gt;
  
   &lt;div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"&gt;
    &lt;!-- content --&gt;
   &lt;/div&gt;
  
   &lt;!-- More cols --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The number of cols to display on each grid row should depend on screen size so I find it difficult to specify more div class="row" or do div clearfix to insert breaks. That's why all cols are inside the same div class="row".</p>
  
  <p>It all works fine in mobile view (width &lt; 500) and desktop/tablet landscape (width > 1024), but in between those widths the row + cell content goes beyond the screen with horizontal scrolling and thus the images doesn't center align.</p>
  
  <p><a href="https://imgur.com/j5awJZm" rel="nofollow noreferrer"><img src="https://i.imgur.com/j5awJZm.png" title="source: imgur.com" /></a></p>
  
  <p>You can <a href="https://vatnaland.no" rel="nofollow noreferrer">see it live here</a> if you resize your width to around 700-750. I've been trying to debug why this is happening, but I can't figure out what I'm doing wrong. Anyone care to help?</p>