CODEWITHSUNDEEP
cssflexboxleafletzurb-foundation
bertday
bertday

Reputation: 10971

Reordering Foundation XY grid cells on small devices

I'm just getting started using the Zurb Foundation 6.4.3 XY Grid. I'm having some trouble conceptualizing how I would do the following:

On large screens, my site should look like this:

enter image description here

On small screens I'd like Panel B to come first, and have a fixed height of 300px:

enter image description here

I have a Codepen of all this here: https://codepen.io/rbrtmrtn/pen/vWYKQP

Right now there are two issues with how this appears on small screens:

  1. I'm not sure how to make Panel B appear above Panel A when that grid-x gets collapsed.
  2. Panel B is a web map which requires a fixed height or some kind of autosizing (like Flexbox grow) in order to work. When I resize the site and collapse the grid-x the map disappears, probably because Foundation is trying to fit the cell to its content and there is none (the map behaves more like a floated element).

Would appreciate any help sorting this out.

Upvotes: 1

Views: 2010

Answers (1)

bertday
bertday

Reputation: 10971

A coworker steered me in the right direction -- the answer was to use source ordering, which allows you to specify the order in which elements appear on different screen sizes.

Upvotes: 1

Related Questions