響應div訂單

我是自舉網格系統的新手，我想重新爲移動設備訂購<div>區域。響應div訂單

這是佈局我對桌面視圖：

current column layout

而這正是我想要的手機：

resized column layout

我當前的HTML代碼：

<div class="col-md-3"> 
    <div id="A"> A </div> 
    <div id="B"> B </div> 
</div> 

<div class="col-md-9"> 
    C 
</div>

C不過，如果我在手機上查看該頁面，則訂單是A-> B-> C，因爲A & B都在第一列中。但我不知道如何實現A-> C-> B順序。那麼，我該如何做到這一點？

來源

2014-12-18 Wessel van der Linden

你可能要考慮使用JavaScript和媒體查詢，以重新安排在較小的屏幕分辨率DOM元素....我目前正在尋找引導文件，看看它是否可以提供上述功能 – NewbornCodeMonkey 2014-12-18 23:12:18

媒體查詢是一個很好的方法來做到這一點。 – joydesigner 2014-12-19 00:42:06

[如何在Bootstrap響應式網站中混合列而不破壞桌面版本？]的可能重複（http://stackoverflow.com/questions/27540716/how-to-mix-columns-in-a-bootstrap-responsive-網站沒有打破這張桌子） – arshad 2014-12-19 04:22:11

這可能並不是最優雅的方式，但您可以在切換到移動設備時隱藏元素B，並使用引導程序的「自定義元素」顯示具有相同內容的元素B， hidden-xs「和」visible-xs「類。事情是這樣的......

<div class="row"> 
    <div class="col-md-3 col-xs-12"> 
     <div id="A"> A </div> 
     <div id="B" class="hidden-xs"> B </div> 
    </div> 

    <div class="col-md-9 col-xs-12"> 
     C 
    </div> 
    <div id="B" class="col-xs-12 visible-xs"> B </div> 
</div>

我也建議參照的official bootstrap documentation更多信息

來源

2014-12-18 23:06:23 nbarth

它確實不是很高雅，但它會做..謝謝:) – 2014-12-18 23:13:20

mdcol-md-9代表medum設備，這意味着所有設備的屏幕分辨率高達992px。

Here你會發現col-xs，col-sm表。 col-md和col-lg resultions。

您可以使用它們爲您的元素定義col-xs-12。這將告訴瀏覽器，在適用於xs定義的設備上，該列將採用所有12個網格部分。您可以將一些規則一樣，例如：

<div class="col-xs-12 col-md-6">foo</div>

這意味着元素是12 xs和6 md設備。

來源

2014-12-18 22:30:16

你應該重讀這個問題。這完全沒有回答，他需要調整dom元素的順序，他的代碼可以很好地切換到移動... – NewbornCodeMonkey 2014-12-18 23:10:46

回答

相關問題