Responsive design ZURB基金会如何改变布局中的要素位置 我正在使用Zurb基金会创建一个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>

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

对于平板电脑/手机等，页面仅显示一列，按以下顺序显示div：

伊曼奇公司

内容1

内容2

内容3

内容4

登录

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

公司形象

登录

内容1

内容2

---

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

通过添加行重新设计布局，并仅将公司图像放入该行，然后分两列登录。然后粘贴上一个代码

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

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

因此，在本例中，使用链接管理移动布局。通过这种方式进行修改（我设置了背景色以使这个示例更清晰）

否则，您可以使用“显示为小”和“隐藏为小”样式，并设置两个不同的视图（对于具有固定大小的移动设备，但内容将是多余的）

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

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

---

我能做到这一点，我后来看到了你的答案，我认为答案是一样的：

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

公司形象
内容1
内容2
内容3
内容4
@Html.Partial（“\u登录”）
内容1
内容2
内容3


内容4
...
...
...

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

---

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

谢谢Pepek。但是在你的解决方案中，CompanyImage和Login将具有相同的高度，我必须遵循的设计中的某些东西没有发生，这就是为什么我创建了两个不同的列。当你使用show for small和hide for small时，这意味着这些部分只是隐藏的，但它们是e在页面上两者都存在。因此，在您的情况下，content1、content2等是双倍的-因此数据传输更大，文件也更大。在我看来，最好将移动网格与标准网格一起使用。