Адаптивный вид сетки для начальной загрузки

ужна помощь, чтобы изменить количество столбцов в строке при изменении размера окна. Например, для большого и среднего экрана должно быть 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}

Может кто-нибудь, пожалуйста, помогите мне исправить это.

Спасибо