列源排序[Zurb Foundation 5]

Question

我正试图让这种布局既能在移动设备上工作，又能在桌面上工作。这可以通过复制一列并使用show来表示小/大，但我只想通过使用推/拉状态或类似的方式来实现（所以不需要重复标记）。

中型/大型：

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

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

Answer 2

当您想要切换列E时，您需要使用show类来表示小，而show类用于表示大

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