リオーダファウンデーションXYデバイスのグリッドセル

Question

Zurb Foundation 6.4.3 XY Gridを使い始めました。私はいくつかのトラブル私は次の操作を実行する方法を概念化することだ：大画面で

を、私のサイトは次のようになります。小さな画面で

私はパネルが欲しいですB最初に来て、300ピクセルの固定の高さを持っている：

私が持っていますここでは、このすべてのCodepen：https://codepen.io/rbrtmrtn/pen/vWYKQP

今、これは小さな画面上での表示方法には2つの問題があります。

1. 私はgrid-xが崩壊ますとき、パネルBは、パネルAの上に表示されるようするかどうかはわかりません。
2. パネルBは、動作するために一定の高さまたは何らかの自動サイズ設定（Flexbox growなど）が必要なweb mapです。サイトのサイズを変更してgrid-xが崩壊すると、おそらくFoundationがそのコンテンツにセルを合わせようとしているため、マップが表示されなくなります（マップはフローティング要素のように動作します）。

これを分類する助けに感謝します。

Answer 1

同僚が私を正しい方向に導いてくれました。回答は、source orderingを使用して、さまざまな画面サイズで要素が表示される順序を指定することでした。