Compreendendo as classes de grade (col-sm- # e col-lg- #) no Bootstrap 3

Estou começando no Bootstrap 3 e estou tendo alguns problemas para entender como as classes de grade devem ser usadas.

Aqui está o que descobri até agora:

Parece que as classes col-sm-#e col-lg-#diferem das antigas col-#porque só se aplicam quando as telas estão acima de um determinado tamanho (768px e 992px respectivamente). Se você omitir o -sm- ou -lg-, os divs nunca serão recolhidos em uma coluna.

No entanto, quando eu crio dois divs dentro de uma linha que são os dois col-sm-6, parece que eles só ficam lado a lado quando a janela está entre 768 px e 992 px de largura. Em outras palavras, se eu encolher a janela totalmente e, em seguida, aumentá-la lentamente, o layout é uma coluna única, depois duas colunas e, em seguida, volta para uma coluna única novamente .

1. É este o comportamento pretendido?
2. Se eu quiser duas colunas para algo acima de 768 px, devo aplicar as duas classes? ( <div class="col-sm-6 col-lg-6">)
3. col-6 Também deve ser incluído?<div class="col-6 col-sm-6 col-lg-6">

[ATUALIZAR ABAIXO]

Dei outra olhada nos documentos e parece que esqueci uma seção que fala especificamente sobre isso.

As respostas às minhas perguntas:

1. Sim, eles devem ser aplicados apenas a intervalos específicos, e não a tudo acima de uma certa largura.

2. Sim, as classes devem ser combinadas.

3. Parece que isso é apropriado em certos casos, mas não em outros porque as classes col- # são basicamente equivalentes a col-xsm- # ou larguras acima de 0px (todas as larguras).

Além de ler os documentos muito rapidamente, acho que fiquei confuso porque entrei no Bootstrap 3 com uma "mentalidade Bootstrap 2". Especificamente, eu estava usando os estilos responsivos (opcionais) (bootstrap-responsive.css) na v2 e v3 é bastante diferente (para o melhor IMO).

ATUALIZAÇÃO para versão estável:

Esta pergunta foi escrita originalmente quando RC1 estava fora. Eles fizeram algumas mudanças importantes no RC2, portanto, para quem está lendo isso agora, nem tudo o que foi mencionado acima ainda se aplica.

No momento em que estou escrevendo isso, as col-*-#classes parecem se aplicar para cima. Portanto, por exemplo, se você quiser que um elemento tenha 12 colunas (largura total) para telefones, mas duas 6 colunas (meia página) para tablets e superiores, você faria algo assim:

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

(Eles também adicionaram um ponto de interrupção xs adicional depois que esta pergunta foi escrita.)

Aqui você tem um tutorial muito bom, que explica como usar as novas classes de grade no Bootstrap 3.

Também cobre mixins etc.

"Se eu quiser duas colunas para algo acima de 768 px, devo aplicar as duas classes?"

Isso deve ser tão simples como:

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

Não há necessidade de adicionar o col-lg-6também.

Demo: http://www.bootply.com/73119

A melhor maneira de entender é simplesmente pensar de cima para baixo (grandes desktops para telefones celulares)

Em primeiro lugar, como B3 é móvel primeiro, se você usar xs, as colunas serão as mesmas de áreas de trabalho grandes a xs (eu recomendo usar xs ou sm, pois isso manterá tudo do jeito que você quiser em todos os tamanhos de tela)

Em segundo lugar, se você quiser dar largura diferente para colunas em dispositivos ou resoluções diferentes, então você pode adicionar várias classes, por exemplo

o acima irá alterar a largura de acordo com as resoluções da tela, LEMBRE-SE que estou mantendo o total de colunas em cada classe = 12

Espero que minha resposta ajude!

Para alterar a resposta do SDP acima, você NÃO precisa declarar col-xs-12em <div class="col-xs-12 col-sm-6">. Bootstrap 3 é mobile-first, então cada coluna div é assumida como uma div de 100% de largura por padrão - o que significa que no tamanho "xs" ela tem 100% de largura, sempre será o padrão para esse comportamento, independentemente do que você definir em sm, md, lg. Se quiser que suas xscolunas não sejam 100%, normalmente você faz a col-xs-(1-11).

Isso pode ser tarde, pois acho que a maioria de nós está usando o BS4. Este artigo explicou todas as perguntas que você fez de maneira detalhada e simples e também inclui o que fazer quando. O guia detalhado para usar bs4 oubootstrap

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