在小设备上重新排序基础XY网格单元

Question

我刚开始使用Zurb基金会6.4.3 XY Grid。我有一些麻烦概念化我会怎么做到以下几点：

在大屏幕，我的网站应该是这样的：

在小屏幕我想面板乙先来，并且具有300像素的固定高度：

我有一个这一切都在这里Codepen：https://codepen.io/rbrtmrtn/pen/vWYKQP

现在有与如何出现在小屏幕上的两个问题：

1. 我不知道如何让B组出现A组以上时grid-x被倒塌。
2. 面板B是web map需要固定高度或某种自动大小（如Flexbox grow）才能工作。当我调整网站大小并合拢grid-x时，地图消失，可能是因为Foundation试图将单元格适合其内容并且没有（地图的行为更像是浮动元素）。

将不胜感激任何帮助整理出来。

Answer 1

一位同事指引我朝着正确的方向 - 答案是使用source ordering，它允许您指定元素在不同屏幕尺寸上的显示顺序。