Preciso de ajuda para alterar o número de colunas em uma linha dinamicamente ao redimensionar a janela. Por exemplo, para telas grandes e médias, deve haver 3 colunas seguidas, para pequenas deve haver 2 e para extra pequena apenas 1 coluna

Algo assim

Para grandes e médias

{col-1} {col-2} {col-3}

{col-4} {col-5} {col-6}

Para pequenas

{col-1} {col-2}

{col-3} {col-4}

{col-5} {col-6}

e semelhante para extra pequeno

O que eu fiz agora é fazer uma linha e colocar 3 colunas nela

<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>

mas usando esse truque, na tela pequena, ele mostra 2 colunas seguidas e, na próxima linha, apenas 1 coluna

{col-1} {col-2}

{col-3}

{col-4} {col-5}

{col-6}

Alguém pode me ajudar a resolver isso.

obrigado