列源排序 [ Zurb Foundation 5 ]

Question

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

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

因为要切换E列，需要使用class 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>

Answer 2

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

一般来说，css是做不到的，因为一列必须占据它的space，而你不知道它有多长。

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

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

列源排序 [ Zurb Foundation 5 ]

Column Source Ordering [ Zurb Foundation 5 ]

css

css-float

zurb-foundation-5