更改排序順序不同的設備分辨率

我想建立一個對平板電腦尺寸分辨率比上使用Twitter的引導普通臺式機的尺寸resoltion不同的排序順序3.更改排序順序不同的設備分辨率

我的結構看起來像這樣的：

<div class="row"> 
    <div class="col-lg-3"> 
     <div>A</div> 
     <div>B</div> 
    </div> 
    <div class="col-lg-6"> 
     <div>C</div> 
     <div>D</div> 
    </div> 
    <div class="col-lg-3"> 
     <div>E</div> 
     <div>F</div> 
    </div> 
</div>

列內的div顯示下方彼此結果的全尺寸的屏幕上看起來是這樣的：

A|C|E 
B|D|F

然而，所有地區可以有不同的高度，這是預期的行爲。

如果我看的佈局更小的屏幕上，它看起來像這樣：

A 
B 
C 
D 
E 
F

是否有辦法巧妙地改變對更小的設備佈局：

C 
E 
A 
D 
F 
B

謝謝您幫幫我！

來源

2015-08-18 moinsen

您可以打印兩次代碼，並使用Bootstrap * - 對它們進行隱藏以按照您的要求進行分類。它確實有缺點，因爲您將內容打印兩次，即使只顯示一次，但這是由您決定是否值得。

<!-- Visible only on small --> 
<div class="row visible-sm"> 
    <div class="col-lg-3"> 
     <div>C</div> 
     <div>E</div> 
    </div> 
    <div class="col-lg-6"> 
     <div>A</div> 
     <div>D</div> 
    </div> 
    <div class="col-lg-3"> 
     <div>F</div> 
     <div>B</div> 
    </div> 
</div>

見搗鼓完整的例子 https://jsfiddle.net/rkk4qpzb/

來源

2015-08-18 11:11:45 Woopaa

謝謝您的回答。我想過，但由於容器不僅包含「A」，「B」......，而且包含一些沉重的JS地圖和大量數據，我認爲這不是一種選擇。也許我應該考慮發送一個帶有分辨率的AJAX請求並打印出任何HTML似乎合適的東西？ – moinsen

（使用col-*-(pull|push)）列排序，當所有列是全尺寸（-12）作爲移動設備不工作。它向推/拉列添加相對位置，但僅向左/右方向添加（例如col-xs-pull-9添加right:75%樣式）。

此外，只要不是所有列（A,B,C,D和E,F均位於單列中），您都無法重新排列div。你將不得不把他們全部列。

什麼可以用的是display:flex與order:上的項目：

ul { display: flex; flex-direction: column; list-style: none; } 
 
li { display: block; order: 1 } 
 
@media screen and (max-width: 768px) { 
 
    #A { order: 3 } 
 
    #B { order: 6 } 
 
    #C { order: 1 } 
 
    #D { order: 4 } 
 
    #E { order: 2 } 
 
    #F { order: 5 } 
 
}

<ul> 
 
    <li id="A">A</li> 
 
    <li id="B">B</li> 
 
    <li id="C">C</li> 
 
    <li id="D">D</li> 
 
    <li id="E">E</li> 
 
    <li id="F">F</li> 
 
</ul>

來源

2015-08-18 11:17:55

更改排序順序不同的設備分辨率

回答

相關問題