使用引导程序重新排列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>

但是这些列只是越界而且不会切换行。

这是否可以使用一些引导程序hax来完成，或者通过创建多个div来实现这一点，我根据屏幕大小隐藏和显示这些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;}
}

Answer 2

没有简单的方法可以使用CSS重新排序元素，在任何解决方案中，您都必须在没有Bootstrap的情况下进行重新排序，因为它的网格系统与这些解决方案不兼容。

• Use display: table-*-group to reorder（仅适用于最多三个元素，旧浏览器支持很多）
• 使用新的flexbox定位系统，该系统仅为supported by the newest browsers。