Question

我正在尝试使用Twitter Bootstrap 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

谢谢你的帮助！

Answer 1

您可以打印两次代码，并使用Bootstrap * -hidden对其进行排序。它确实有它的缺点，因为你要打印两次内容，即使你只展示一次，但是你可以决定它是否值得。

<!-- 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/

Answer 2

当移动设备上的所有列都是全尺寸（col-*-(pull|push)）时，列排序（使用-12）不起作用。它会向推/拉列添加相对定位，但只能在左/右方向上添加（例如col-xs-pull-9添加right:75%样式。

此外，您无法根据需要重新排序div，只要它们不是所有列（A,B，C,D和E,F都在单列中）。你必须把它们全部列成。

您可以使用的display:flex order:项目：

＆＃13;

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 }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: