来源订购小屏幕上的列

时间:2014-03-03 09:20:28

标签: html css zurb-foundation

this is the site, 当我重新调整到小屏幕时,它看起来像这样:

enter image description here

我需要将第二个黄色块替换为底部块,我无法通过粉底拉动和完成它完成它。推送选项

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望最终产品看起来像这样:

I think this is what you are looking for.

您想要更改的行的当前顺序是DEAD MAIN'S CACHE(文本),BENJAMIN(Portrait),然后PROTECT YOUR NECK(Coffee Bean?)。

切换DEAD MAIN'S CACHE(文本)并保护你的颈部(咖啡豆?)。

删除对small的所有引用,并使用push和pull来更正大屏幕的顺序。

您当前的代码:

<div class="row">
    <div class="small-12 small-push-12 large-4 columns">DEAD MAIN’S CACHE (Text)</div>
    <div class="large-4 columns">BENJAMIN (Portrait)</div>
    <div class="small-12 small-push-12 large-4 columns">PROTECT YOUR NECK (Coffee Bean?)</div>
</div>

我的建议:

<div class="row">
    <div class="large-4 large-push-8 columns">PROTECT YOUR NECK (Coffee Bean?)</div>
    <div class="large-4 columns">BENJAMIN (Portrait)</div>
    <div class="large-4 large-pull-8 columns">DEAD MAIN’S CACHE (Text)</div>
</div>

本质上,首先设计移动设备,然后使用推/拉来“修复”更大的屏幕尺寸。

如果我误解了你的问题,请告诉我。

我希望有所帮助。