使用响应式 Zurb Foundation 移动列

Question

当大小较小时移动列的最佳方法是什么？

示例如下：

 <div class="row">
    <div class="two columns">...</div>
    <div class="seven columns">...</div>
    <div class="three columns">...</div>
</div>

当屏幕尺寸较小时，我希望两列移动到七列下方。我想出的唯一方法是做类似的事情：

 <div class="row">
    <div class="two columns hide-for-small">...</div>
    <div class="seven columns">...</div>
    <div class="two columns show-for-small">...</div>
    <div class="three columns">...</div>
</div>

但这似乎有点混乱，可能会令人困惑。有没有更好的办法？

Answer 1

Foundation 有一些类可以让您使用列顺序。查看Foundation Documentation 中的源订购部分。

例如：

<div class="row">
    <div class="seven columns push-two">...</div>
    <div class="two columns pull-seven">...</div>
    <div class="three columns">...</div>
</div>

在较大的屏幕上，列将显示为 2-7-3，但在较小的屏幕上，它将恢复为 7-2-3。

这仍然有点混乱和混乱，但总比为不同的显示器创建单独的、重复的列要好。

Answer 2

让列彼此下降的方法是浮动它们，然后让 CSS 的自然流动将它们向下推，因为它们的父容器变得太窄。您的 CSS 不在您的问题中，因此很难知道这些类在做什么。

我在 Stack Overflow 上看到很多关于流行框架的问题，我认为有时它们只会让 CSS 的自然工作原理更加混乱。

很抱歉没有回答，但老实说，如果您检查一下，我认为您会得到更好的服务：http://codepen.io/bradfrost/full/zhCwd

如果可以的话，我最好的建议是远离框架。他们添加了许多您根本不需要的（令人困惑的）代码。祝你好运，基思。