如何使用Zurb Foundation更改布局中的元素位置

Question

我正在使用Zurb Foundation为网络创建布局，我在重新调整浏览器大小时遇到​​了问题。

这是我的布局

<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="twelve columns">
                Company image
            </div>
        </div>
        <div class="row">
            <div class="four columns">
                content1
            </div>
            <div class="four columns">
                content2
            </div>
            <div class="four columns">
                content3
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                content4
            </div>
        </div>
    </div>
    <div class="four columns">
        <div class="row">
            <div class="twelve columns">
                Login
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
</div>

当平板电脑/手机等页面只显示一列时，它会按以下顺序显示div：

1. 公司Imange
2. 内容1
3. 内容2
4. Content3
5. Content4
6. 登录
7. ...

我希望登录公司图像正下方，如下所示：

1. 公司形象
2. 登录
3. 内容1
4. 内容2
5. ....

我怎样才能得到这种行为？提前谢谢。

Answer 1

通过添加行重新设计您的布局，并将该行仅放入公司图像并登录两列。之后粘贴您以前的代码。

<div class="row">
<div class="twelve columns">
    <div class="row">
        <div class="eight columns">
                <div class="row">
                    <div class="twelve columns">
                        Company image
                    </div>
                </div>
        </div>
        <div class="four columns">
                <div class="row">
                    <div class="twelve columns">
                        Login
                    </div>
                </div>

        </div> 
    </div>
    <div class="eight columns">
        <div class="row">
            <div class="four columns">
                content1
            </div>
            <div class="four columns">
                content2
            </div>
            <div class="four columns">
                content3
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                content4
            </div>
        </div>
    </div>
    <div class="four columns">
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
</div>

Answer 2

因此，在这种情况下，使用Mobile Grid链接来管理移动布局。通过这种方式进行修改（我设置背景颜色以使此示例更清晰）。

否则，您可以使用“show-for-small”和“hide-for-small”样式并设置两个不同的视图（对于固定大小的移动设备，但内容将是多余的。

<div class="row">
<div class="twelve columns">
    <div class="row">
        <div class="eight columns " style="background-color:red">
                <div class="row">
                    <div class="twelve columns">
                        Company image
                    </div>
                </div>
        </div>
        <div class="four columns" style="background-color:blue">
                <div class="row">
                <div class="mobile-one"></div>
                    <div class="twelve columns mobile-three" style="background-color:gray">
                        Login
                    </div>
                </div>

        </div> 
    </div>
    <div class="row">
    <div class="eight columns" style="background-color:red">
        <div class="row">
            <div class="four columns">
                content1
            </div>
            <div class="four columns">
                content2
            </div>
            <div class="four columns">
                content3
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                content4
            </div>
        </div>
    </div>
    <div class="four columns" style="background-color:blue">
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
    </div>
</div>

Answer 3

我能用这个实现它，我后来看到了你的回答，我认为它是一样的：

<div class="container">
<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="twelve columns">
                Company Image
            </div>    
        </div>
        <div class="row hide-for-small">
            <div class="four columns">
                Content1
            </div>
            <div class="four columns">
                Content2
            </div>
            <div class="four columns">
                Content3
            </div>
        </div>
        <div class="row hide-for-small">
            <div class="twelve columns">
                Content4
            </div>
        </div>
    </div>
    <div class="four columns">
        <div class="row pull-four">
            <div class="twelve columns">
                @Html.Partial("_Login")
            </div>
        </div>
        <div class="row show-for-small">
            <div class="four columns">
                Content1
            </div>
            <div class="four columns">
                Content2
            </div>
            <div class="four columns">
                Content3
            </div>
        </div>
        <br />
        <div class="row show-for-small">
            <div class="twelve columns">
                Content4
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
        <div class="row">
            <div class="twelve columns">
                ...
            </div>
        </div>
    </div>
</div>

可能不是最优雅的解决方案，但效果非常好！

你的上一句话是什么意思？