Пренареждане на клетъчните решетки XY Foundation на малки устройства - css, flexbox, leaflet, zurb-foundation

Току-що започнах да използвам фондацията Zurb 6.4.3 XY Grid, Имам някои неприятности да концептуализирам как ще направя следното:

за големи екрани, моят сайт трябва да изглежда по следния начин:

за малки екрани Бих искал панел B да дойде първи и да има фиксирана височина от 300px:

Аз имам Codepen на всичко това тук: https://codepen.io/rbrtmrtn/pen/vWYKQP

В момента има два въпроса как изглежда това на малки екрани:

1. Не съм сигурен как да направя панел B да се появи над панел А, когато е така grid-x се срина.
2. Панелът B е a уеб карта който изисква определена височина или някакъв вид авторазреждане (като Flexbox grow), за да работят. Когато променям размера на сайта и свивам grid-x картата изчезва, вероятно защото Фондацията се опитва да се побере в съдържанието на клетката и няма такива (картата се държи по-скоро като плаващ елемент).

Ще се радваме да ви помогнем да сортирате това.

Отговори:

Един колега ме насочи в правилната посока - отговорът беше да се използва поръчване на източника, което ви позволява да зададете реда, в който се появяват елементите на различни размери на екрана.