如何重新排列具有12個引導列寬度的div的順序？

我有兩個div，一個在另一個之上。如何重新排列具有12個引導列寬度的div的順序？

當窗口寬度低於992個像素，我希望B爲高於，所以想要垂直重新排列它們。

我試圖用bootstrap做到這一點。結果變成這樣：

爲什麼？

HTML：

<div class="parent"> 
    <div class="row"> 
    <div class="a col-xs-12 col-xs-offset-12 col-sm-offset-12 col-md-offset-0"> 
     a 
    </div> 
    <div class="b col-xs-12"> 
     b 
    </div> 
    </div> 
</div>

CSS：

.parent 
{ 
    width: 100px; 
} 

.a 
{ 
    background: #faa; 
} 
.b 
{ 
    background: #afa; 
}

https://jsfiddle.net/24tt6xgL/5/

其他的事情我已經嘗試：

推動A-DIV 12和拉動B- div 12列col-md-push-12和COL-MD-拉12。
只推a-div，不拉b-div。
推動一個-DIV 6列，拉動B-DIV 6列此

來源

2016-03-04 Anders Lindén

我不確定，但我相信你不能用bootstrap做到這一點 –

它是否像12列太多或我無法獲得環繞效果？ –

這只是因爲a在你的html之前是b，你不能把b放在一個ony之上用bootstrap –

一個解決方案是使用類似hidden- *。通過這種方式，您可能會有重複的代碼，但它很快就會實現您想要做的並保留在Bootstrap中。

<div class="parent"> 
    <div class="row"> 
    <div class="b col-xs-12 visible-xs visible-sm"> 
     b 
    </div> 
    <div class="a col-xs-12"> 
     a 
    </div> 
    <div class="b col-xs-12 hidden-xs hidden-sm"> 
     b 
    </div> 
    </div> 
</div>

正如你可以在這裏看到，該.B DIV被複制，但從未出現了兩次：MD和LG的屏幕，頂部.B格將被隱藏，並且底部有一個將被顯示。對於xs和sm屏幕，情況正好相反。

當然，這個解決方案並不完美，代碼的維護更加費力，所以如果這些div比示例代碼中的長得多，那麼嘗試使用CSS可能是值得的，但是如果代碼很短，這將是一個很好的解決方案。

同樣值得注意的是，在.b div之上和之下複製.a div是一個等效的解決方案。

來源

2016-03-04 13:39:09

這是@Skelly解決方案。至少提到它 – QGA

如何重新排列具有12個引導列寬度的div的順序？

回答

相關問題