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

Question

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

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

谢谢！

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