折叠到一列时如何使右侧的div落在Foundation中的左侧div之上答案

【问题标题】：How to get the righthand div to fall above the left div in Foundation when collapsing to one column折叠到一列时如何使右侧的div落在Foundation中的左侧div之上
【发布时间】：2023-04-01 08:42:01
【问题描述】：

我正在 Zurb 的 Foundation 4 中构建一个站点。我有一行有两列。左列是段落，右列是图像。当我将浏览器缩小到移动尺寸以使布局折叠成一列时，我希望右 div（图像）在左 div（段落）转换为一列时位于左 div（段落）之上。

默认情况下，图像将位于段落下方，因为 div 位于顺序的后面。

谢谢！

【问题讨论】：

标签： html css responsive-design zurb-foundation

【解决方案1】：

Foundation 有 push 和 pull 可以用于此目的的类。在您的情况下，您可以这样设置：

<div class="row">
  <div class="large-6 push-6 columns">Image</div>
  <div class="large-6 pull-6 columns">Text from paragraph</div>
</div>

您可以通过查看http://foundation.zurb.com/docs/components/grid.html 的文档并查找“Source Ordering”来了解更多信息

【讨论】：