html - 小屏幕上的源排序列

Question

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

我需要将第二个黄色 block 替换为底部 block ，但我无法通过基础的推拉选项完成它

有什么建议吗？

Answer 1

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

您想要更改的行的当前顺序是 DEAD MAIN'S CACHE(文本)、BENJAMIN(肖像)，然后是 PROTECT YOUR NECK(咖啡 bean ？)。

切换 DEAD MAIN'S CACHE(文本)和 PROTECT YOUR NECK(咖啡 bean ？)。

删除所有对 small 的引用，并使用推拉来更正大屏幕的顺序。

您当前的代码:

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

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

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

希望对您有所帮助。