Comprender las clases de cuadrícula (col-sm- # y col-lg- #) en Bootstrap 3

Estoy comenzando con Bootstrap 3 y tengo algunos problemas para comprender cómo se deben usar las clases de cuadrícula.

Esto es lo que he descubierto hasta ahora:

Parece que las clases col-sm-#y col-lg-#difieren de las antiguas col-#en que solo se aplicarán cuando las pantallas superen un cierto tamaño (768px y 992px respectivamente). Si omite -sm- o -lg- los divs nunca colapsarán en una columna.

Sin embargo, cuando creo dos divs dentro de una fila que son ambos col-sm-6, parece que solo están uno al lado del otro cuando la ventana tiene entre 768px y 992px de ancho. En otras palabras, si reducir la ventana todo el camino hacia abajo y luego, lentamente, ensancharlo, el diseño es sola columna, y dos columnas, luego de vuelta a una sola columna de nuevo .

1. ¿Es este el comportamiento previsto?
2. Si quiero dos columnas para algo superior a 768px, ¿debo aplicar ambas clases? ( <div class="col-sm-6 col-lg-6">)
3. ¿Debería incluirse col-6 también ?<div class="col-6 col-sm-6 col-lg-6">

[ACTUALIZAR ABAJO]

Eché otro vistazo a los documentos y parece que pasé por alto una sección que habla específicamente sobre esto.

Las respuestas a mis preguntas:

1. Sí, están destinados a aplicarse solo a rangos específicos, en lugar de todo lo que supere un cierto ancho.

2. Sí, las clases están diseñadas para combinarse.

3. Parece que esto es apropiado en ciertos casos pero no en otros porque las clases col- # son básicamente equivalentes a col-xsm- # o anchos superiores a 0px (todos los anchos).

Aparte de leer los documentos demasiado rápido, creo que estaba confundido porque entré en Bootstrap 3 con una "mentalidad de Bootstrap 2". Específicamente, estaba usando los estilos receptivos (opcionales) (bootstrap-responsive.css) en v2 y v3 es bastante diferente (para mejor en mi opinión).

ACTUALIZAR para versión estable:

Esta pregunta se escribió originalmente cuando RC1 estaba disponible. Hicieron algunos cambios importantes en RC2, por lo que para cualquiera que lea esto ahora, no todo lo mencionado anteriormente todavía se aplica.

En el momento en que estoy escribiendo esto, las col-*-#clases parecen aplicarse hacia arriba. Entonces, por ejemplo, si desea que un elemento tenga 12 columnas (ancho completo) para teléfonos, pero dos 6 columnas (media página) para tabletas y más, debe hacer algo como esto:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(También agregaron un punto de interrupción xs adicional después de que se escribió esta pregunta).

Aquí tienes un muy buen tutorial, que explica cómo usar las nuevas clases de grid en Bootstrap 3.

También cubre mixins, etc.

"Si quiero dos columnas para algo superior a 768px, ¿debo aplicar ambas clases?"

Esto debería ser tan simple como:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

No es necesario agregar el col-lg-6también.

Demostración: http://www.bootply.com/73119

La mejor manera de entenderlo es simplemente pensar de arriba a abajo (desde grandes escritorios hasta teléfonos móviles)

En primer lugar, como B3 es móvil primero, si usa xs, las columnas serán las mismas desde los escritorios grandes hasta xs (recomiendo usar xs o sm, ya que esto mantendrá todo de la manera que desee en cada tamaño de pantalla)

En segundo lugar, si desea dar un ancho diferente a las columnas en diferentes dispositivos o resoluciones, puede agregar varias clases, por ejemplo

lo anterior cambiará el ancho de acuerdo con las resoluciones de pantalla, RECUERDA que estoy manteniendo el total de columnas en cada clase = 12

¡Espero que mi respuesta ayude!

Para enmendar la respuesta de SDP anterior, NO es necesario que declare col-xs-12en <div class="col-xs-12 col-sm-6">. Bootstrap 3 es móvil primero, por lo que se supone que cada columna div es un div de ancho del 100% de forma predeterminada, lo que significa que en el tamaño "xs" tiene un ancho del 100%, siempre tendrá ese comportamiento de forma predeterminada, independientemente de lo que establezca en sm, md, lg. Si desea que sus xscolumnas no sean del 100%, normalmente debe hacer un col-xs-(1-11).

Esto podría ser tarde ya que creo que la mayoría de nosotros estamos usando BS4. Este artículo explicó todas las preguntas que hizo de una manera detallada y sencilla, también incluye qué hacer y cuándo. La guía detallada para usar bs4 obootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7