작은 장치에서 재정렬 XY 격자 셀

Question

저는 Zurb Foundation 6.4.3 XY Grid을 사용하기 시작했습니다. 나는 다음을 수행 할 방법을 개념화 몇 가지 문제에 봉착 : 대형 스크린에

를 내 사이트는 다음과 같아야합니다 작은 화면에

가 내가 패널 싶습니다 B가 먼저오고, 300 픽셀의 고정 된 높이가합니다 :

나는이를 여기에 모든이의 Codepen : https://codepen.io/rbrtmrtn/pen/vWYKQP

지금이 작은 화면에 표시되는 방법을 두 가지 문제가 있습니다 :

1. 그 grid-x이 붕괴 될때 패널 B는 패널 A 위에 표시하는 방법을 잘 모르겠어요 .
2. 패널 B는 고정 높이 또는 일종의 자동 크기 지정 (예 : Flexbox grow)이 필요한 web map입니다. 사이트 크기를 조정하고 grid-x을 접을 때지도가 사라집니다. 이는 Foundation이 셀을 내용에 맞추려고 시도했기 때문이며 아무 것도 없습니다 (지도가 떠 다니는 요소처럼 동작합니다).

어떤 도움을 주시면 감사하겠습니다.

Answer 1

직장 동료가 올바른 방향으로 나를 조종했는데 대답은 source ordering을 사용하여 요소가 다른 화면 크기로 나타나는 순서를 지정할 수있게했습니다.