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

Question

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

这是我的布局

<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. 公司形象
2. 内容1
3. 内容2
4. 内容3
5. 内容4
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>

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

你最后一句话是什么意思？