Menu icon Foundation
F5 Source ordering : content vs. sidebar

Hello there,

I have a laid out structure with three columns in ZURB Foundation 5, two of which are sidebars (left & right) and the middle one is the main content area.

I've been playing around with the documentation's source ordering instructions but had some troubles.

I tried to visualise the situation so that you can understand what I want in a second.

This is the desktop view and the structure :
http://i.stack.imgur.com/ohZYE.png

and this is how I want it to look like on mobile :

http://i.stack.imgur.com/ZzLXY.png

zurbF5foundation5sourceorderingat

Hello there,

I have a laid out structure with three columns in ZURB Foundation 5, two of which are sidebars (left & right) and the middle one is the main content area.

I've been playing around with the documentation's source ordering instructions but had some troubles.

I tried to visualise the situation so that you can understand what I want in a second.

This is the desktop view and the structure :
http://i.stack.imgur.com/ohZYE.png

and this is how I want it to look like on mobile :

http://i.stack.imgur.com/ZzLXY.png

Ali Tabibzadeh over 5 years ago

Thanks Esa,

So source ordering only works between two columns in order to get source ordering to work in more than 2 columns we have to put them in just two of them right? Isn't there a way to approach this directly?

Thanks for your help and the basic setup you provided.

Wing-Hou Chan over 5 years ago

Hey Ali!

Have you read about the mobile-first principle? I recommend you search it up with your favourite search engine and read about it! Once you get your head around it you'll own the world!

Anyway, I'll give you a little intro to it.

Mobile-first is the principle where you design and build for mobile first. You'll order the content in the way it would look on a mobile then you use Foundation's classes to shift content around on larger screens. It doesn't matter how many columns you have, always follow the mobile-first principle. This is the best way to do it!

I've made a CodePen demo for you: http://codepen.io/winghouchan/pen/vbBiq

Esa Rantanen over 5 years ago

Thanks for a correction. I'm still so deep into F3.