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

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

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

谢谢!

最佳答案

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 上的文档了解更多信息。并查找“来源排序”

关于html - 折叠到一列时如何让右侧的 div 落在 Foundation 中的左侧 div 之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18360232/