zurb-foundation - 在 Zurb Foundation 中重新排列列

Question

我的问题是，在桌面上我喜欢先有菜单，然后是最右上角的标志。目前，当我将模板缩小到移动版本时， Logo 位于菜单下方，这并不令人满意。我想在菜单之前吃。我试过使用推/拉没有成功。

在移动 View 中甚至可以在模板顶部显示 Logo 吗？

这是我的代码...

<div class="container" style="margin-top: 15px;">
        <div class="row">
            <div class="ten columns mobile-four">
                <nav>
                    <ul>
                                        <li><a href="#">link</a></li> 
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                                        <li><a href="#">link</a></li>
                    </ul>
                </nav>
            </div>
                        <div class="two columns mobile-four">
                <a href="index.php"><img src="images/logo.png" alt="logo"/></a>
            </div>
                </div>
    </div>

Answer 1

所以首先你可以取消 mobile-four类，它什么都不做(除非它对你来说是自定义的)。查看文档有一个 mobile-[one two three] , 4 相当于不使用它。

要解决此问题，只需应用源排序类，如下所示:

<div class="container" style="margin-top: 15px;">
        <div class="row">
            <div class="two columns push-ten">
                <a href="index.php">
                    <img src="images/logo.png" alt="logo" /></a>
            </div>
            <div class="ten columns pull-two">
                <nav>
                    <ul>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                        <li><a href="#">link</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

推拉将正确排序菜单第一和 Logo 第二。推和拉在移动设备上被忽略，这意味着您的 Logo 将堆叠在移动设备上的菜单上方。

桌面:
[菜单][标志]

移动的
[标识]
[菜单]

文件:
http://foundation.zurb.com/docs/grid.php