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

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

使用响应式Zurb Foundation移动列

2 个答案: