如何将特定列强制缩小到较小尺寸的下一行？

Question

说我有三列：

Col 1 | Col 2 |第3栏

我想，当屏幕尺寸变为“小”时，要更改的列为：

Col 1 |第3栏

Col 2（在它自己的全尺寸行中）

基本上，Col 3会进入它自己的行。现在，我知道我可以使用Foundation提供的“visiblity”类来完成此操作，但是根据我的理解，您必须两次复制Col 2内容。如果可能的话，我想避免这种情况。

有什么想法吗？或者我疯了，基金会不容易允许这个？或者也许我应该通过制作Col 2 positive: absolute或其他东西并将它称为一天来一起破解它？

Answer 1

您正在寻找名为Source Ordering的内容。 （这是该文档页面的底部。）

订购你的html，以便按照1,3,2的顺序定义列。然后，使用推/拉类来交换第3列和第2列的位置，以便它们在同一行中。

<div class="small-6 medium-4 columns">
  ... Column 1 Content ...
</div>

<div class="small-6 medium-4 columns medium-push-4">
  ... Column 3 Content ...
</div>

<div class="small-12 medium-4 columns medium-pull-4">
  ... Column 2 Content ...
</div>