用bootstrap交換div

我一直在閱讀很多關於使用bootstrap交換，重新排列和替換div的問題和解答，但是我無法解決我的問題。用bootstrap交換div

我有兩個包含更多div的div。

一格（A）在右側，另一格在左側（B）。

在桌面和平板電腦視圖中，它們被設置爲與另一個AB相鄰。當移動視圖我想是B.

<div class="container"> 

    <div class="row"> 
    <div class="col-md-6 col-sm-6"> 
     A 
    </div> 
    <div class="col-md-6 col-sm-6"> 
     B 
    </div> 
    </div> 

    </div>

下，我試圖用推拉，但沒有奏效。任何幫助將不勝感激。由於

來源

2015-12-17 Isabella

我知道你說過你試過但添加col-sm-push-6到頂部的div和col-sm-pull-6到底部的div應該是你想要的。 – Benneb10

當我這樣做時，他們確實會交換，但不是在移動視圖中。我正在使用筆記本電腦和筆記本電腦查看它們是否已交換，但是當我將瀏覽器重新調整到近似最小的視圖時，它們不會被清除。 – Isabella

看看這個，嘗試相反（移動設計），並在桌面上交換它們http://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-大小 – Benneb10

這裏是一個解決方案，並獲得成功對我來說：

<div class="container"> 
<div class="row"> 
    <div class="col-md-6 col-sm-6 col-lg-6 col-push-6"> 
     Content B 
    </div> 
    <div class="col-md-6 col-sm-6 col-lg-6 col-pull-6"> 
     Content A 
    </div> 
</div> 
</div>

查閱工作例HERE

更多閱讀引導訂購here

來源

2015-12-17 21:34:21 JacobG182

您可以使用可視類一招：

<div class="row"> 
<div class="col-md-6 col-sm-6 visible-lg visible-md"> 
A (Visible-lg & md) 
</div> 
<div class="col-md-6 col-sm-6"> 
B 
</div> 
<div class="col-md-6 col-sm-6 visible-sm visible-xs"> 
A (Visible-sm & xs) 
</div> 
</div>

來源

2015-12-17 21:34:26

真的是一個糟糕的設計，尤其是當內容不是靜態的時候。 –

當內容A和B只是一個小文本時，我認爲它很好 –

不要重複自己 – JDandChips

用bootstrap交換div

回答

相關問題