ブートストラップグリッドの注文に応じて

Question

ちょっとそこに私は立ち往生していて、ブートストラップに慣れている人を探しています。

これは私の現在の状況です：

：私の問題は、タブレットモードでのタブは次のようにあるべきであるということである

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig yellow" /> 
 
     <h3 class="yellow">1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig lightgreen" /> 
 
     <h3 class="lightgreen">3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig blue" /> 
 
     <h3 class="blue">5</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig orange" /> 
 
     <h3 class="orange">2</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig green" /> 
 
     <h3 class="green">4</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <hr class="hrBig brown" /> 
 
     <h3 class="brown">6</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
</div>

：

そして、それは、対応するコードです

12 
34 
56 

しかし、今、彼らはそのようなものです：

、モバイルに、彼らは次のようになります。

1 
2 
3 
4 
5 
6 

どのように私はこれを達成することができますか？

Answer 1

私は再アレンジあなたのコードにビットを必要とし、あなたはあなたがブートストラップ3.3.7

のために、このように使用することができます

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig yellow" /> 
 
      <h3 class="yellow">1</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig orange" /> 
 
      <h3 class="orange">2</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig yellow" /> 
 
      <h3 class="yellow">3</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig orange" /> 
 
      <h3 class="orange">4</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-4 col-sm-12"> 
 
     <div class="row"> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig yellow" /> 
 
      <h3 class="yellow">5</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     <div class="col-md-12 col-sm-6 col-12"> 
 
      <hr class="hrBig orange" /> 
 
      <h3 class="orange">6</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

望むものを達成するために、いくつかのラッパーを追加しました

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 

 
<div class="col-sm-4 col-xs-12"> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig yellow" /> 
 
     <h3 class="yellow">1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 

 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig orange" /> 
 
     <h3 class="orange">2</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-sm-4 col-xs-12"> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig lightgreen" /> 
 
     <h3 class="lightgreen">3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 

 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig green" /> 
 
     <h3 class="green">4</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-sm-4 col-xs-12"> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig blue" /> 
 
     <h3 class="blue">5</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    </div> 
 
    <div class="col-sm-12 col-xs-6"> 
 
     <hr class="hrBig brown" /> 
 
     <h3 class="brown">6</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p> 
 
    </div> 
 
</div> 
 

 
</div>