0

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

这是示例：

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

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

4

2 回答 2

1

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

例如：

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

它仍然有点混乱和令人困惑，但比必须为不同的显示器创建单独的、重复的列要好。

于 2013-01-25T20:38:46.987 回答
-1

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

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

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

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

于 2013-01-25T19:45:39.133 回答