Разделить .btn-группу на другую строку, при определенных размерах экрана

Question

Я играю с Bootstrap 4 (alpha 6), и мне нравится то, что я вижу до сих пор. Одна из проблем, с которыми я столкнулся, заключается в том, как сделать btn-group с флагом/радиоприемником, который будет перемещаться по 2-й линии, когда он станет слишком широким для страницы. Так пример:

http://codepen.io/youradds/pen/KaBJEm

<div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-secondary"> 
     <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" /> 
     Piscine 
     </label> 
     <label class="btn btn-secondary"> 
     <input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" /> 
     Piscine 
     </label> 
.... loads of other buttons too 
</div> 

В соответствии с этой документацией:

http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons

При масштабировании CodePen вниз по ширине, вы увидите, что я имею в виду. Я бы хотел, чтобы он переместился на вторую строчку (вместо того, чтобы заставлять ширину страницы разместить ее).

Возможно ли это?

Answer 1

btn-group как и многие другие элементы в Bootstrap 4, теперь используйте flexbox. Есть также новые flexbox utilities, чтобы включить настраиваемое поведение.

В этом случае вы можете просто использовать flex-wrap ...

<div class="btn-group flex-wrap" data-toggle="buttons"> 
    ... 
</div> 

https://www.codeply.com/go/8MYqS2EWGO