Bootstrap 6-4-2-1列

我曾经举做出响应式设计在一个非常简单的网站http://www.auto-moto-klub.cz/我花了几个小时试图实现rouhly这种行为根据屏幕大小（像素范围仅仅是例子，不必须完全是这些）：

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

目前，它可用于class =“ col-sm-2”，如下所示：

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

我尝试了class =“ col-xs-1 col-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

请帮忙。预先感谢您的任何建议。