Html 小屏幕上的源排序列

,， 当我重新调整到小屏幕时，它看起来是这样的：

我需要第二个黄色块替换为底部块，我不能用基金会的推拉选项完成

---

有什么建议吗

如果我理解正确，您希望最终产品的外观如下所示：

您要更改的行的当前顺序是DEAD MAIN的缓存（文本）、BENJAMIN（肖像），然后是保护您的脖子（咖啡豆？）

切换死MAIN的缓存（文本）并保护您的脖子（咖啡豆？）

删除对小屏幕的所有引用，并使用推拉操作纠正大屏幕的顺序

您当前的代码：

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

保护你的脖子（咖啡豆？）
本杰明（肖像）
死干线缓存（文本）

本质上，首先要为移动设备设计，并使用推/拉功能“固定”更大的屏幕尺寸

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

---

我希望这能有所帮助。

在此阅读：据我所知，只有一个选项可以对同一行中的列进行水平排序，但即使它们在同一行中也不能垂直排序。