如果这是一个愚蠢的问题，我很抱歉！我还是Bootstrap的新手。
我有4个div。在md和lg屏幕上我会这样做：
[A] [B] [C] [D]
在sm屏幕上，我想重新排序到两列。我的代码就是这样做的：
[A] [B]
[C] [D]
但是，我真正想要它要做的是：
[A] [C]
[B] [D]
然后，在xs屏幕上，我希望它能够这样做：
[A]
[B]
[C]
[D]
如何使用Bootstrap实现这一目标？我知道有推动和拉动的课程，但我还没有弄清楚它们是如何工作的 - 当我试图推动并拉动中间的div时，它们最终会消失。我真的很感谢你的帮助！
顺便说一句，这是我现在获得的代码：
<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>
答案 0 :(得分：0)
您可以使用.col-md-push-和.col-md-pull-更改列的顺序。
答案 1 :(得分：0)
推送在CSS 左：x％，拉在CSS 右：x％。我认为，div会消失，因为它们太远或者在同一个地方。
我认为，在这种情况下，你无法使用拉动和推动。
如果您想要使用完整的字母表，则必须在每个col中使用sm中的位置绝对值。
对于A - M留在left: 0左侧。并且对于N - Z，使用right: 0保持在右侧。您可以将 0 更改为其他值。你必须给每个col一个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>