在小設備上重新排序基礎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，它允許您指定元素在不同屏幕尺寸上的顯示順序。