Question

清除瘦视口中的列是一个简单的壮举，但我需要技术来移动物体。我正在努力调和一对显着不同的移动和桌面模拟。桌面模拟包含一个3列网格，该网格应该在移动视图中折叠成一列网格，然后隐藏一些元素并重排其他元素。

使用display: none隐藏元素是微不足道的。对我来说，困难的部分是从栏中打破元素并将它们移动到整个地方，就像http://bostonglobe.com/一样。从Firebugging他们的布局，我发现你可以通过操纵浮动来颠覆源顺序，浮动可能会重置并在移动视口中使用媒体查询清除元素。这是在折叠视图中使其他2列的内容下方清晰显示中间列（在3列网格中）的一种方法。

这是否可以用纯CSS来回应布局的响应程度？我可以使用其他技术（可能使用JavaScript）吗？

Answer 1

你无法操纵DOM到那个程度......没有办法实际重新排序标记。我解决这个问题的方法是复制元素并将其定位到特定视口宽度所需的位置并隐藏它直到需要它为止。

完全避免这种情况的最佳方法是首先设计移动设备：

http://stuffandnonsense.co.uk/projects/320andup/

Answer 2

我认为浮动示例是使用纯CSS可以完成的限制但是使用javascript几乎可以做任何事情 - jQuery .append可以用来拉出任何元素并将其放在其他地方;有效地改变了DOM的顺序和布局。

http://api.jquery.com/append/

但从性能的角度来看，.append并不便宜，所以如果你可以通过“构建移动/小型优先”，我会尽量避免它。实现它的另一种方法是实际上为不同的屏幕宽度设置不同的布局，然后使用媒体查询（不仅仅是CSS隐藏内容，而是实际上在javascript中，因此“隐藏”内容实际上不会呈现或包含在代码中根本不需要，所以DOM没有未使用/隐藏的元素或不必要的代码。

Answer 3

Bootstrap 3.0有column re-ordering :)这意味着你可以单独为每个媒体查询指定列排序，纯粹使用预先设置的CSS类名，没有javascript或任何时髦的黑客攻击！

来自Bootstrap docs的示例：

<div class="row">
  <div class="col-md-9 col-md-push-3">Appears first in code, second in browser</div>
  <div class="col-md-3 col-md-pull-9">Appears second in code, first in browser</div>
</div>

非平凡的响应式设计布局技术（即移动物体）

3 个答案: