如何切换堆叠到不同列的两个Bootstrap div？

Question

如果这是一个愚蠢的问题，我很抱歉！对于Bootstrap我还是比较新的。

我有4个divs。在md和lg屏幕上，我要这样做：

[A] [B] [C] [D] 

在sm屏幕上，我想重新排列为两列。我的代码做到这一点：

[A] [B] 
[C] [D] 

，但我真的想它做的是这样的：

[A] [C] 
[B] [D] 

然后，XS屏幕我希望它这样做：

[A] 
[B] 
[C] 
[D] 

我该如何用Bootstrap来实现？我知道有些课程需要推动和拉动，但我还没有弄清楚它们是如何工作的 - 当我试图推拉中间格时，它们最终消失。我将衷心感谢您的帮助！

顺便说一句，这里是我现在已经得到了代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
     <div class="container centered"> 
 
      <div class="col-md-3 col-sm-6"> 
 
       A 
 
      </div> 
 
      <div class="col-md-3 col-sm-6"> 
 
       B 
 
      </div> 
 
      <div class="col-md-3 col-sm-6"> 
 
       C 
 
      </div> 
 
      <div class="col-md-3 col-sm-6"> 
 
       D 
 
      </div> 
 
     </div>

Answer 1

您可以使用.col-md-push-和.col-md-pull-更改列的顺序。

http://getbootstrap.com/css/#grid-column-ordering

Answer 2

推是在CSS 左：X％和拉是在CSS 右：X％。我认为，divs消失了，因为它们是太远了或者它们是在相同的地方。

我认为，在这种情况下，你不能使用拉和推。

如果你想要它与完整的字母表，你必须使用位置绝对 sm为每个列。

对于A-M留在left: 0左侧。对于N - Z留在right: 0右侧。您可以将更改为另一个值。而且你必须给每个列表一个top。否则它不起作用。

CSS

@media screen and (min-width: 768px) and (max-width: 992px) { 
    .alpha > .row > div { 
     position: absolute; 
    } 
    .left-sm { 
     left: 0; 
    } 
    .right-sm { 
     right: 0; 
    } 
    /* left side */ 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(1) { 
     top: 0px; /* A */ 
    } 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(2) { 
     top: 50px; /* B */ 
    } 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(3) { 
     top: 100px; /* ... */ 
    } 
    .alpha > .row:nth-of-type(1) > div:nth-of-type(4) { 
     top: 150px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(1) { 
     top: 200px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(2) { 
     top: 250px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(3) { 
     top: 300px; 
    } 
    .alpha > .row:nth-of-type(2) > div:nth-of-type(4) { 
     top: 350px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(1) { 
     top: 400px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(2) { 
     top: 450px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(3) { 
     top: 500px; 
    } 
    .alpha > .row:nth-of-type(3) > div:nth-of-type(4) { 
     top: 550px; 
    } 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(1) { 
     top: 600px; 
    } 
    /* right side */ 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(2) { 
     top: 0px; /* N */ 
    } 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(3) { 
     top: 50px; /* O */ 
    } 
    .alpha > .row:nth-of-type(4) > div:nth-of-type(4) { 
     top: 100px; /* ... */ 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(1) { 
     top: 150px; 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(2) { 
     top: 200px; 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(3) { 
     top: 250px; 
    } 
    .alpha > .row:nth-of-type(5) > div:nth-of-type(4) { 
     top: 300px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(1) { 
     top: 350px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(2) { 
     top: 400px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(3) { 
     top: 450px; 
    } 
    .alpha > .row:nth-of-type(6) > div:nth-of-type(4) { 
     top: 500px; 
    } 
    .alpha > .row:nth-of-type(7) > div:nth-of-type(1) { 
     top: 550px; 
    } 
    .alpha > .row:nth-of-type(7) > div:nth-of-type(2) { 
     top: 600px; 
    } 
} 

HTML

<div class="container alpha"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">A</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">B</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">C</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">D</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">E</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">F</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">G</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">H</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">I</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">J</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">K</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">L</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 left-sm"> 
      <div class="space well">M</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">N</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">O</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">P</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">Q</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">R</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">S</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">T</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">U</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">V</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">W</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">X</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">Y</div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 right-sm"> 
      <div class="space well">Z</div> 
     </div> 
    </div> 
</div> 

Demo