Адаптивный вид сетки для начальной загрузки
ужна помощь, чтобы изменить количество столбцов в строке при изменении размера окна. Например, для большого и среднего экрана должно быть 3 столбца подряд, для малого должно быть 2, а для очень маленького - только 1 столбец.
Что-то вроде этого
Для больших и средних
{Col-1} {Col-2} {Col-3}
{Col-4} {Col-5} {Col-6}
Для маленьких
{Col-1} {Col-2}
{Col-3} {Col-4}
{Col-5} {Col-6}
и похожие на очень маленькие
То, что я сделал сейчас, это сделал строку и поместил в нее 3 столбца
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 1
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 2
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 3
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 4
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 5
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 6
</div>
</div>
но используя этот трюк, на маленьком экране он показывает 2 столбца подряд, а в следующем ряду только 1 столбец
{Col-1} {Col-2}
{Col-3}
{Col-4} {Col-5}
{Col-6}
Может кто-нибудь, пожалуйста, помогите мне исправить это.
Спасибо