重新排列Zurb基金会的专栏

Question

我的问题是,在桌面上我喜欢先打开菜单,然后是最右边的徽标.目前,当我将模板缩小为移动版时,徽标会出现在菜单下,这是不令人满意的.我希望在菜单之前有它.我尝试使用推/拉没有成功.

在移动视图中,甚至可以在模板顶部放置徽标吗？

这是我的代码......

<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],四个相当于将其关闭.

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

<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] [菜单]

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