Bootstrap 6 - 4 - 2 - 1 столбцы

Question

Я использовал бутстрап, чтобы сделать отзывчивый дизайн на очень простом сайте http://www.auto-moto-klub.cz/ Я потратил несколько часов, пытаясь добиться такого поведения на основе размера экрана (диапазон пикселей - это просто пример, не обязательно чтобы быть именно это):

<= 300px .. 1 column 
>= 301px & <= 600px .. 2 columns 
>= 601px & <= 1024 .. 4 columns 
>= 1024px .. 6 columns 

в настоящее время он работает с классом = "Col-см-2", как это:

<= 767px .. 1 column .. TOO BIG around 300-767px, LOOKS CRAZY 
>= 768px .. 6 colums .. TOO SMALL around 768-1024px 

Я попробовал класс = "Col-хз-1 цв-SM- 2 col-md-4 col-lg-6 ".. Я подумал, что это означает, что на большом маленьком экране размер будет иметь 1 столбец, на маленьком 2, на среднем 4 и на больших 6. Но, вероятно, я вообще не понимаю этого, потому что это делает странные вещи:

>= 1200px .. 2 columns 
<= 1199px & >= 992px .. 3 columns 
<= 991px & >= 768px .. 6 columns 
<= 767px .. 6 columns somehow broken placed on the left 

Помогите. Заранее благодарю за любой совет.

Answer 1

попробуйте следующее: class = "col-lg-2 col-md-3 col-sm-6 col-xs-12". Это должно решить проблему.