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

但是，列剛剛超出界限並且不會切換行。

這是可能完成使用只是一些引導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;} 
} 

Answer 2

有沒有簡單的方法只使用CSS和任何解決方案，你不得不做重新排序元素，而引導自它的網格系統與這些解決方案不兼容。

• Use display: table-*-group to reorder（僅適用於多達三個元素的作品，並在舊的瀏覽器支持flacky）
• 使用新的CSS flexbox定位系統，這是唯一supported by the newest browsers。