Реорганізація XY сіткових осередків на невеликих пристроях - CSS, Flexbox, буклет, Zurb-Foundation

Я просто почав використовувати Zurb Foundation 6.4.3 XY Grid. Я маю певні труднощі з уявленням, як я буду робити наступне:

На великі екрани, мій сайт повинен виглядати так:

На маленькі екрани Я хочу, щоб панель B мала фіксовану висоту 300 пікселів:

У мене є Codepen всього цього тут: https://codepen.io/rbrtmrtn/pen/vWYKQP

Наразі існує два питання про те, як це виглядає на невеликих екранах:

1. Я не знаю, як зробити панель B з'являтися над панеллю А grid-x руйнується
2. Панель B є а веб-карта який вимагає фіксованої висоти або свого роду авторозмір (наприклад, Flexbox grow), щоб працювати. Коли я змінюю розмір сайту і згортаю grid-x карта зникає, ймовірно, тому що Фонд намагається помістити клітинку у свій вміст, і нічого немає (карта веде себе більше як плаваючий елемент).

Будемо вдячні за будь-яку допомогу у вирішенні цього.

Відповіді:

Співробітник керував мене у правильному напрямку - відповідь була використана замовлення джерела, який дозволяє вказати порядок, в якому елементи з'являються на різних розмірах екрана.