Necesito ayuda para cambiar el número de columnas en una fila dinámicamente al cambiar el tamaño de la ventana. Por ejemplo, para pantallas grandes y medianas, debe haber 3 columnas seguidas, para las pequeñas debe haber 2 y para las extra pequeñas solo 1 columna

Algo como esto

Para grandes y medianos

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

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

Para pequeños

{col-1} {col-2}

{col-3} {col-4}

{col-5} {col-6}

y similar para extra pequeño

Lo que he hecho ahora es hacer una fila y poner 3 columnas en ella.

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

pero usando este truco, en una pantalla pequeña muestra 2 columnas seguidas, y en la siguiente fila solo 1 columna

{col-1} {col-2}

{col-3}

{col-4} {col-5}

{col-6}

¿Alguien puede ayudarme a arreglar esto?

Gracias