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:absoluteand上bottom: 0，然后在 上加一个padding-bottom，.row等于column-E的高度。

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

Answer 2

由于要切换 E 列，需要使用show-for-small和show-for-large类

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