Parrilla de blogs Bootstrap 4.1 con tres columnas, dos puntos de ruptura y reordenación.

Para este blog quería que la página de entradas del blog tuviera tres'columnas'. ¿Por qué cité las columnas de la palabra? Porque lo que es una columna en una pantalla grande puede ser una fila en un dispositivo móvil. Bootstrap utiliza contenedores, filas y columnas. Y por supuesto, una columna Bootstrap puede mostrarse en la pantalla como una columna o una fila. ¡Ayuda!

A la hora de diseñar una maqueta no debemos pensar en las columnas, sino en los elementos de la pantalla y en cómo queremos que aparezcan en la pantalla de los diferentes dispositivos. Como desarrollador me siento detrás de un monitor todo el día, así que quería ver tres columnas, lo siento, elementos de la pantalla:

A | B | C

A es la parte menos importante y más pequeña, no tengo un contenido particular en mente para esto en este momento. Inicialmente se puede utilizar como espaciador en dispositivos grandes.
B es, por supuesto, la parte más importante de la página, el contenido, la entrada del blog. Es el más grande en anchura.
C es la siguiente parte más importante que contiene, búsqueda, etiquetas, información seleccionada. Es el segundo más grande en anchura.

En los dispositivos móviles quería que pareciera:

B
C
A

Para dispositivos entre grandes y pequeños, quería que pareciera:

B | C
A

Ahora, ¿cómo lo hacemos? Siendo un Bootstrap noob busqué en la web soluciones de copiar y pegar pero no encontré nada parecido. Hora de empezar a leer. Cuando investigas obtienes nuevas palabras clave que puedes usar en tus búsquedas y finalmente golpeé el post 'Cómo Reordenar Columnas con Clases de Orden de Bootstrap 4' y todas las piezas cayeron en su lugar. En primer lugar, Bootstrap habla de los dispositivos, por lo que nos ceñimos a esta terminología. En segundo lugar, Bootstrap es móvil en primer lugar, por lo que debemos empezar con el dispositivo más pequeño. Esto es muy importante para entender cómo podemos cambiar el orden de los elementos!

Comenzamos con los dispositivos extra pequeños (xs) y los dispositivos pequeños (sm), después están los dispositivos medianos (md) y finalmente tenemos los dispositivos grandes (lg) y los dispositivos extra grandes (xl). Agregué las clases elem-1-contenido, elem-2-información y elem-3-al menos-importante añadir algunos colores para hacer más fácil ver lo que está sucediendo.

Para el dispositivo más pequeño fijamos la clase a col-12, lo que hace que cada columna sea el ancho máximo y resulta en tres filas visibles, contenido, información, menos importante:

<div class="container">
    <div class="row">

        <div class="col-12 elem-1-content">
            Content
        </div>

        <div class="col-12 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Para el dispositivo medio, establecemos la clase de la columna de contenido en md-9 y la clase de la columna de información en md-3, poniéndolas en la misma fila. La columna menos importante sigue utilizando el máximo de 12, establecido para el dispositivo más pequeño, sin necesidad de añadir nada aquí:

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Finalmente, para el dispositivo grande, establecemos la clase de la columna de contenido en lg-8, la clase de la columna de información en lg-3 y la clase de la columna menos importante en lg-1. Ahora necesitamos reordenar el Bootstrap para poner las columnas en las posiciones correctas. Añada order-lg-1 a la columna menos importante para colocarla en la posición más a la izquierda, order-lg-12 a la columna de información para colocarla en la posición más correcta y order-lg-10 a la columna de contenido para colocarla en algún punto intermedio:

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 col-lg-8 order-lg-10 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 col-lg-3 order-lg-12 elem-2-information">
            Information
        </div>

        <div class="col-12 col-lg-1 order-lg-1 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Los pasos se muestran a continuación. Para verlos debes estar detrás de un monitor'grande' y cambiar el tamaño de tu navegador:

Enlaces / créditos

Bootstrap Grid system Reordering
https://getbootstrap.com/docs/4.0/layout/grid/#reordering

How to Reorder Columns with Bootstrap 4 Order Classes
https://bootstrapcreative.com/bootstrap-push-pull-column-ordering-tutorial/