title: Split .btn-group onto another line, at certain screen sizes
body: <p>I'm playing around with <strong>Bootstrap 4 (alpha 6)</strong>, and I'm liking what I see so far. One issue I've come across, is how to make a <code>btn-group</code> with checkbox/radios in, that will move onto a 2nd line once it gets too wide for the page. So an example:</p>
  
  <p><a href="http://codepen.io/youradds/pen/KaBJEm" rel="noreferrer">http://codepen.io/youradds/pen/KaBJEm</a></p>
  
  <pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
        &lt;label class="btn btn-secondary"&gt;
          &lt;input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" /&gt;
          Piscine
        &lt;/label&gt;
        &lt;label class="btn btn-secondary"&gt;
          &lt;input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" /&gt;
          Piscine
        &lt;/label&gt;
  .... loads of other buttons too
  &lt;/div&gt;
  </code></pre>
  
  <p>As per this documentation:</p>
  
  <p><a href="http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons" rel="noreferrer">http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons</a></p>
  
  <p>If you scale the CodePen down in width, you will see what I mean. What I would like to happen, is for it to move onto a 2nd line (instead of forcing the page width to accommodate it).</p>
  
  <p>Is this even possible?</p>