グリッドシステムの発動タイミング

-smなどのprefixはとても重要です。そしてちょっと判り難いです。

いわゆる、ウインド幅(端末)によってグリッドシステムの効果を発動します。

公式サイトの説明

下のサンプルは、ブラウザを縮めていくと解りますが、上から順番に段落ちしていきます。

これらを上手く組み合わせて構成するのですが、基本的にタブレット(col-sm-*)を指定しておけば大きな問題は発生しないと思います。

-xsはHorizontal at all times(常に水平)とあるように、どのデバイスでも変化が有りません。なら指定する必要もなさそうな気もしますが、どうなんでしょうか。

col-md-* デスクトップ[1200px以下]  

1200px以下で発動。

        

          

            
(｡-ω-)
            
(｡-ω-)
            
(｡-ω-)
          
        
        

col-md-* デスクトップ[992px～1200px未満]  

992px～1200pxで発動。低解像度モニターのデスクトップやノートパソコンがこのくらいでしょうか。

        

          

            
(｡-ω-)
            
(｡-ω-)
            
(｡-ω-)
          
        
        

col-sm-* タブレット[768px～992px未満]  

768px～992pxで発動。タブレット端末程度ですね。一時期流行ったモバイルノートなどもこれに含まれそうです。

        

          

            
(｡-ω-)
            
(｡-ω-)
            
(｡-ω-)
          
        
        

col-xs-* モバイル[768px未満]  

公式サイトに Horizontal at all times とあるように、これはモバイル端末サイズまでウインドを縮めても変化が有りません。

        

          

            
(｡-ω-)
            
(｡-ω-)
            
(｡-ω-)