Riordino le celle della griglia XY della Fondazione su piccoli dispositivi: css, flexbox, leaflet, zurb-foundation

Sto appena iniziando a utilizzare Zurb Foundation 6.4.3 XY Grid. Ho qualche problema a concettualizzare come farei quanto segue:

Sopra schermi di grandi dimensioni, il mio sito dovrebbe assomigliare a questo:

Sopra piccoli schermi Mi piacerebbe che il Panel B arrivasse per primo e avesse un'altezza fissa di 300 px:

Ho un Codepen di tutto questo qui: https://codepen.io/rbrtmrtn/pen/vWYKQP

Al momento ci sono due problemi con il modo in cui questo appare su schermi di piccole dimensioni:

1. Non sono sicuro di come far apparire il pannello B sopra il pannello A quando questo grid-x diventa crollato
2. Il pannello B è un mappa web che richiede un'altezza fissa o una sorta di autosizing (come Flexbox grow) per funzionare. Quando ridimensiono il sito e comprimo il grid-x la mappa scompare, probabilmente perché la Fondazione sta cercando di adattare la cella al suo contenuto e non ce n'è alcuna (la mappa si comporta più come un elemento fluttuante).

Gradirei qualsiasi aiuto per risolvere questo problema.

risposte:

Un collega mi ha guidato nella giusta direzione - la risposta era da usare ordinamento della fonte, che consente di specificare l'ordine in cui gli elementi vengono visualizzati su diverse dimensioni dello schermo.