4列を2列2列にするには

Question

私は以下のようにしています。デスクトップでは4列、小さい画面では2列と2列に分割されます。

方法上記のように達成することができますか？

Answer 1

小さな画面には異なる幅を指定してください。次の例では、lg画面で4要素幅の1行と小さな画面で2行の2要素の2行を表示します。実際には、両方のインスタンスで1行ですが、小さいビューポートにそれぞれ2つの要素があります。

各列はビューポート内の12の部分です - つまり、画面の不動産の3/12または25％に相当するlgの3つの列を指定しますが、ビューポートがmdに達するととsmのサイズ（Bootstrapsのメディアクエリに基づいて）幅は、画面の6/12 0r 50％とcalclatedされ、1行に移動していないdivは単純に次の行にフロートします。

<div class="row"> 
    <div class="col-lg-3 col-md-6 col-sm-6"> Column 1</div> 
    <div class="col-lg-3 col-md-6 col-sm-6"> Column 2</div> 
    <div class="col-lg-3 col-md-6 col-sm-6"> Column 3</div> 
    <div class="col-lg-3 col-md-6 col-sm-6"> Column 4</div> 
</div>