在小型设备上重新排序 Foundation XY 网格单元
Reordering Foundation XY grid cells on small devices
我刚刚开始使用 Zurb Foundation 6.4.3 XY Grid。我在概念化如何执行以下操作时遇到了一些问题：
在大屏幕上，我的网站应如下所示：
在小屏幕上我希望面板 B 先出现，并且固定高度为 300 像素：
我这里有所有这些的代码笔：https://codepen.io/rbrtmrtn/pen/vWYKQP
现在在小屏幕上的显示方式有两个问题：
- 我不确定
grid-x 折叠时如何让面板 B 显示在面板 A 上方。
- 面板 B 是一个 web map，需要固定高度或某种自动调整大小（如 Flexbox
grow）才能工作。当我调整网站大小时并折叠 grid-x 地图消失，可能是因为 Foundation 试图使单元格适合其内容并且有 none （地图的行为更像一个浮动元素）。
如能帮助解决此问题，我们将不胜感激。
一位同事为我指明了正确的方向——答案是使用 source ordering，它允许您指定元素在不同屏幕尺寸上的显示顺序。
我刚刚开始使用 Zurb Foundation 6.4.3 XY Grid。我在概念化如何执行以下操作时遇到了一些问题：
在大屏幕上，我的网站应如下所示：
在小屏幕上我希望面板 B 先出现，并且固定高度为 300 像素：
我这里有所有这些的代码笔：https://codepen.io/rbrtmrtn/pen/vWYKQP
现在在小屏幕上的显示方式有两个问题：
- 我不确定
grid-x折叠时如何让面板 B 显示在面板 A 上方。 - 面板 B 是一个 web map，需要固定高度或某种自动调整大小（如 Flexbox
grow）才能工作。当我调整网站大小时并折叠grid-x地图消失，可能是因为 Foundation 试图使单元格适合其内容并且有 none （地图的行为更像一个浮动元素）。
如能帮助解决此问题，我们将不胜感激。
一位同事为我指明了正确的方向——答案是使用 source ordering，它允许您指定元素在不同屏幕尺寸上的显示顺序。