コンテンツを複製せずにこのブートストラップレイアウトを達成するにはどうすればいいですか？

Question

コンテンツを複製せずに特定のブートストラップレイアウトを達成する方法を理解しようとしています。基本的には、いくつかのコンテンツをsm/mdのブレークポイントで2つの列に分割し、次にlgのブレークポイントで3つの列に分割したいと思います。

sm/mdのレイアウトは次のようになります：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     Item 1<br/> 
 
     Item 2<br/> 
 
     Item 3 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     Item 4<br/> 
 
     Item 5<br/> 
 
     Item 6 
 
    </div> 
 
    </div> 
 
</div>

そして、私はそれが次のようになりたいlgブレークポイント上：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     Item 1<br/> 
 
     Item 2 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     Item 3<br/> 
 
     Item 4 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     Item 5<br/> 
 
     Item 6 
 
    </div> 
 
    </div> 
 
</div>

今私はコンテンツを複製し、hidden/visibleクラスを使用して特定のブレークポイントで特定のアイテムのみを表示することでこれを達成できることを知っていますが、コンテンツを複製せずにこれを達成できるかどうかは疑問でした。

3列もすべてcol-lg-6に設定でき、第3列が最初の列のすぐ下にくることがわかりましたが、同じ高さになるように列内のアイテムを均等に分散したいと考えていました。

Answer 1

ブートストラップでは、複数のブレークポイントcol-*-*を指定できます。単一の列は（例えば）col-sm-3 col-md-4 col-lg-6を持つことができ、ブートストラップはビューポートの幅に基づいて適切なサイジングを適用します。だから我々はXS、SM、またはMDが有効である場合は、列幅が6/12とLG場合であることをブートストラップ言っている

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 1</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 2</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 3</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 4</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 5</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 6</div> 
    </div> 
</div> 

：あなたのニーズに

、あなたはの線に沿って何かを使用することができます有効な列幅は4/12です。