html - 使用 bootstrap 重新排列 div

Question

我刚刚开始使用 bootstrap 并尝试为移动设备和网络制作响应式网站。这是我要创建的设计。

我想要 3、4 和 5 改变顺序，这似乎有问题。我一直在使用类似于这样的代码:

<div class="row">
    <div class="col-push-sm-12 col-xs-12">
       3
    </div>
    <div class="col-pull-sm-12 col-xs-12">
        4
    </div>
</div>

但是列只是越界并且不会切换行。

这是否可以仅使用一些 Bootstrap hax 来完成，或者通过创建多个我根据屏幕尺寸隐藏和显示的 div 来完成此操作是否是正确的方法？

Answer 1

你可以尝试这样做。

DEMO

HTML

<div class="container outer">
<div class="row ">
    <div class="col-md-6 staticPos">
       <div class="cont1">1</div>
      <div class="cont2">2</div>
      <div class="cont3">3</div>
      <div class="cont4">4</div>
      <div class="cont5">5</div>
    </div>
</div>  
</div>

CSS

.cont1 {background: green}
.cont2 {background: purple}
.cont3 {background: red}
.cont4 {background: blue}
.cont5 {background: yellow}
.staticPos {position: static}
.outer {position: relative}
.cont2 {position: absolute; right: 15px; top: 0;  width: calc(50% - 30px)}
.cont3 {position: absolute; top: 100%; left: 15px; width: calc(50% - 30px)}

@media (max-width: 992px) {
  .cont2, .cont3 {position: static; width: auto;}
}