¿Cuál es la diferencia entre col-lg-*, col-md-* y col-sm-* en Bootstrap?

La documentación de Bootstrap sí lo explica, pero aún me llevó un tiempo entenderlo. Tiene más sentido cuando me lo explico de una de dos maneras:

Si piensas en las columnas empezando horizontalmente, entonces puedes elegir cuándo quieres que se apilen.

Por ejemplo, si comienzas con columnas: A B C

Decides cuándo deben apilarse para que queden así:

A

B

C

Si eliges col-lg, entonces las columnas se apilarán cuando el ancho sea < 1200px.

Si eliges col-md, entonces las columnas se apilarán cuando el ancho sea < 992px.

Si eliges col-sm, entonces las columnas se apilarán cuando el ancho sea < 768px.

Si eliges col-xs, entonces las columnas nunca se apilarán.

Por otro lado, si piensas en las columnas empezando apiladas, entonces puedes elegir en qué punto se vuelven horizontales:

Si eliges col-sm, entonces las columnas se volverán horizontales cuando el ancho sea >= 768px.

Si eliges col-md, entonces las columnas se volverán horizontales cuando el ancho sea >= 992px.

Si eliges col-lg, entonces las columnas se volverán horizontales cuando el ancho sea >= 1200px.

De documentación de Twitter Bootstrap:

• grid pequeño (≥ 768px) = .col-sm-*,
• grid mediano (≥ 992px) = .col-md-*,
• grid grande (≥ 1200px) = .col-lg-*.

¡Simplifiquemos Bootstrap!

Observa cómo col-sm ocupa el 100% de ancho (es decir, se desplaza a una nueva línea) por debajo de 576px pero col no lo hace. Puedes observar el ancho actual en la parte superior central en el gif.

Aquí viene el código:

        col
        col
        col

        col-sm
        col-sm
        col-sm

Por defecto, Bootstrap alinea todas las columnas (col) en una sola fila con ancho igual. En este caso, tres col ocuparán 100%/3 de ancho cada una, independientemente del tamaño de la pantalla. Puedes observar eso en el gif.

Ahora, ¿qué pasa si queremos renderizar solo una columna por línea es decir, dar un ancho del 100% a cada columna pero solo para pantallas más pequeñas? ¡Ahora vienen las clases col-xx!

Usé col-sm porque quería dividir las columnas en líneas separadas por debajo de 576px. Estas 4 clases col-xx son proporcionadas por Bootstrap para diferentes dispositivos de visualización como móviles, tablets, laptops, monitores grandes, etc.

Entonces, col-sm se dividirá por debajo de 576px, col-md se dividirá por debajo de 768px, col-lg se dividirá por debajo de 992px y col-xl se dividirá por debajo de 1200px

Ten en cuenta que no hay clase col-xs en Bootstrap 4.

Esto resume bastante bien. Puedes volver al trabajo.

Pero hay un poco más. Ahora vienen los col-* y col-xx-* para personalizar el ancho.

Recuerda en el ejemplo anterior mencioné que col o col-xx toma el ancho igual en una fila. Así que si queremos dar más ancho a una columna específica, podemos hacerlo de esta manera.

La fila de Bootstrap se divide en 12 partes, por lo que en el ejemplo anterior había 3 col por lo que cada uno toma 12/3 = 4 partes. Puedes considerar estas partes como una forma de medir el ancho.

También podríamos escribirlo en formato col-* es decir, col-4 así:

  col
  col
  col

Y no habría ninguna diferencia porque por defecto Bootstrap da un ancho igual a col (4 + 4 + 4 = 12).

Pero, ¿qué pasa si queremos dar 7 partes a la 1ra col, 3 partes a la 2da col y el resto 2 partes (12-7-3 = 2) a la 3ra col (7+3+2 por lo que el total es 12), simplemente podemos hacer esto:

  col-7
  col-3
  col-2

y puedes personalizar el ancho de las clases col-xx-* también.

    col-sm-7
    col-sm-3
    col-sm-2

¿Cómo se ve en acción?

¿Qué pasa si la suma de col es mayor que 12? Entonces la col se desplazará/ajustará a la siguiente línea. ¡Sí, puede haber cualquier cantidad de columnas para una fila!

        col-12
        col-9
        col-6
        col-6

¿Qué pasa si queremos 3 columnas en una fila para pantallas grandes pero dividir esas columnas en 2 filas para pantallas pequeñas?

    col-12 col-sm ARRIBA
    col col-sm
    col col-sm

Puedes jugar aquí: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Creo que la parte confusa de esto es el hecho de que BootStrap 3 es un sistema responsive primero móvil y no explica cómo esto afecta a la jerarquía col-xx-n en esa parte de la documentación de Bootstrap. Esto te hace preguntarte qué sucede en dispositivos más pequeños si eliges un valor para dispositivos más grandes y te hace preguntarte si es necesario especificar múltiples valores. (No lo es)

Intentaría aclarar esto diciendo que... Los tipos de menor granularidad (xs, sm) intentan mantener la apariencia del diseño en pantallas más pequeñas y los tipos más grandes (md, lg) se mostrarán correctamente solo en pantallas más grandes, pero envolverán columnas en dispositivos más pequeños. Los valores citados en ejemplos anteriores se refieren al umbral en el cual Bootstrap degrada la apariencia para adaptarse al espacio de la pantalla disponible.

Lo que esto significa en la práctica es que si haces las columnas col-xs-n, mantendrán una apariencia correcta incluso en pantallas muy pequeñas, hasta que la ventana disminuya a un tamaño tan restrictivo que la página no pueda mostrarse correctamente. Esto debería significar que los dispositivos con un ancho de 768px o menos deberían mostrar tu tabla como la diseñaste en lugar de en una forma de columna degradada (única o envuelta). Obviamente, esto aún depende del contenido de las columnas y ese es todo el punto. Si la página intenta mostrar múltiples columnas de datos grandes, una al lado de la otra en una pantalla pequeña, entonces las columnas se envolverán de forma horrible si no lo tienes en cuenta. Por lo tanto, dependiendo de los datos dentro de las columnas, puedes decidir en qué momento se sacrifica el diseño para mostrar el contenido adecuadamente.

Por ejemplo, si tu página contiene tres columnas col-sm-n, Bootstrap envolverá las columnas en filas cuando el ancho de la página caiga por debajo de 992px. Esto significa que los datos siguen siendo visibles pero requerirán desplazamiento vertical para verlos. Si no quieres que tu diseño se degrade, elige xs (siempre que tus datos puedan mostrarse adecuadamente en un dispositivo de menor resolución en tres columnas)

Si la posición horizontal de los datos es importante, entonces debes intentar elegir valores de menor granularidad para mantener la naturaleza visual. Si la posición es menos importante pero la página debe ser visible en todos los dispositivos, entonces se debe usar un valor más alto.

Si eliges col-lg-n, las columnas se mostrarán correctamente hasta que el ancho de la pantalla caiga por debajo del umbral xs de 1200px.