css - 列源排序 [ Zurb Foundation 5 ]

Question

我正在尝试让此布局在移动设备和桌面设备上都能正常工作。可以通过复制列并使用 show-for-small/large 来实现，但我只想使用推/拉状态或任何类似的东西(因此没有重复标记)来实现它。

中/大:

+----------+----------+----------+----------+
| column-A | column-B | column-C | column-D |
+----------+----------+----------+----------+
|                  column-E                 |
+----------+----------+----------+----------+

小:

+----------+----------+----------+----------+
|                  column-A                 |
+----------+----------+----------+----------+
|                  column-B                 |
+----------+----------+----------+----------+
|                  column-C                 |
+----------+----------+----------+----------+
|                  column-E                 |
+----------+----------+----------+----------+
|                  column-D                 |
+----------+----------+----------+----------+

这适用于大型，但显然不适用于小型。 http://jsfiddle.net/2rmfas9r/

<div class="row">
    <div class="columns small-12 large-3">A</div>
    <div class="columns small-12 large-3">B</div>
    <div class="columns small-12 large-3">C</div>
    <div class="columns small-12 large-3">D</div>
    <div class="columns small-12">E</div>
</div>

是否有一种简单的方法来实现所需的布局？

Answer 1

对于 Foundation 源代码排序，如果不重复您的标记就无法做到这一点。它仅适用于同一行上的列。

一般来说，你不能用css那样做，因为一列必须占据它的空间，你不知道它有多长。

如果你的 column-E 有一个固定的高度，你可以把它放在 position:absolute 和 bottom: 0 上，然后添加一个padding-bottom 到 .row，等于 column-E 的高度。

如果您可以使用 Javascript，您可以简单地使用 Foundation.utils.is_medium_up() 检查您所在的视口(viewport)，然后使用 jQuery .deatch() 和.append() 用于column-E 重新定位。