Menu icon Foundation
Left Column needs moving

I have a design with, at full size, a horizontal top menu, and below that, a left menu, and the body of the page to the right.

The horizontal top menu folds as expected, but I can't figure out what to do with the less important left menu.

Does anyone have any suggest how to get the left menu to drop below the body in the mobile version? Or alternative suggestions would be welcome.

source orderingpushpullgridlayout

I have a design with, at full size, a horizontal top menu, and below that, a left menu, and the body of the page to the right.

The horizontal top menu folds as expected, but I can't figure out what to do with the less important left menu.

Does anyone have any suggest how to get the left menu to drop below the body in the mobile version? Or alternative suggestions would be welcome.

Rafi Benkual about 4 years ago

You can use source ordering, which is is push, pull to accomplish this. This will allow something aligned on the left (make it appear to be first) to move to the below another when stacked on small.

See http://foundation.zurb.com/docs/components/grid.html
in source ordering section.

Brandon Arnold about 4 years ago

You'll want to use push and pull methods that can be found on the grid page of the docs.

It will look something like this
http://cdpn.io/dibgv

Pete Clark about 4 years ago

Thanks, that looks like what I am looking for. Off to try it now!