Bootstrap網格排序響應

-1

嘿，我卡住了，我正在尋找有經驗的引導。Bootstrap網格排序響應

這是我目前的狀況：

而這相應的代碼：

<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

但現在他們是這樣的：

和移動他們應該是這樣的：

我怎樣才能做到這一點？

來源

2017-10-13 Tim Gerhard

在SO上，您應該嘗試**自己編寫代碼**。後** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有問題，你可以**發佈你已經嘗試**與清楚的解釋是什麼是'工作**並提供** [最小，完整和可驗證示例]（// stackoverflow.com/help/mcve)**。 SO不是代碼寫入服務。 – Rob

我需要重新安排你的代碼了一下，加了一些包裝達到你想要

<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>

來源

2017-10-13 09:22:12 Swellar

謝謝你。爲我工作 –

您可以使用這樣的引導3.3.7

什麼

<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>

來源

2017-10-13 09:29:05 Vishnu

Bootstrap網格排序響應

回答

相關問題