我遗漏了一些有关 Foundation 5 中源排序类的用法(*-push-* 和 *-pull-*)的信息 我创建了一个JSfiddle 来说明我的理解与现实世界之间的差距 here
案例非常简单:我有一行和两列。在大视口(viewport)上，我希望它们并排放置，每 6 列宽。在小视口(viewport)上，我希望它们堆叠在一起，每 12 列宽，第二列现在位于第一列之上。
[ A ][ B ] --resize--> [ B ]
[ A ]
我得到的是
[ A ][ B ] --resize--> ____[ A ]
[ B ]____
又是代码
<body>
<div class="row ">
<div class="large-6 small-12 small-push-6 columns large-reset-order">
<p>A: On large screens, I should be the first element in the row, taking up half the grid, i.e. 6 columns</p>
<p>Then again, on small screens I should be the second element.</p>
</div>
<div class="large-6 small-12 small-pull-6 columns large-reset-order">
<p>B: On large screens, I should be the second element in the row, i.e. 6 columns</p>
<p>Of course, on small screens, I should show up first!</p>
</div>
</div>
</body>
我看到了this question但我不认为它回答了我的问题。首先，我没有使用 push-12，所以定义了一个类。其次，在我的困惑中，我所做的看起来很像 Foundation docs 的源排序部分中的最后一个示例。
最佳答案
<body>
<div class="row ">
<div class="large-6 small-12 large-push-6 columns ">
<p>A: On large screens, I should be the first element in the row, taking up half the grid, i.e. 6 columns</p>
<p>Then again, on small screens I should be the second element.</p>
</div>
<div class="large-6 small-12 large-pull-6 columns ">
<p>B: On large screens, I should be the second element in the row, i.e. 6 columns</p>
<p>Of course, on small screens, I should show up first!</p>
</div>
</div>
</body>
试试这个..
应该是large-pull和large-push。
关于html - Zurb Foundation 源排序类的简单示例(w/fiddle)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24945727/