更改排序顺序不同的设备分辨率

我想建立一个对平板电脑尺寸分辨率比上使用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

更改排序顺序不同的设备分辨率

回答

相关问题