Изучаю boostrap 4. Не могу разобраться в такой штуке. Имею следующий код
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 text-center">.col-xs-2</div>
<div class="col-xs-8 text-center">.col-xs-8</div>
<div class="col-xs-2 text-center">.col-xs-2</div>
<div class="col-md-4 text-center">.col-md-4</div>
<div class="col-md-2 text-center">.col-md-2</div>
<div class="col-md-2 text-center">.col-md-2</div>
<div class="col-md-4 text-center">.col-md-4</div>
</div>
</div>
Не могу понять. Как сделать так, чтобы на маленьких разрешениях отображался контент состоящий из 3 ячеек xs, а на средних разрешения 4 ячейки md. Раньше верстал без Boostrapa. Просто делал два блока и в зависимости от разрешения экрана задавал display none. И всегда стили задавал от большего разрешения к меньшему. У бустрапа я как понимаю, все делается от меньшего к большему разрешению. Так же буду признателен за ссылку на шпаргалку по бустрапу.
