How to adjust the columns source order


A lot of people get very confused when thinking about source order and wanting to have different columns show in order on mobile than they do on desktop. This is actually VERY easy to do, but you have to stop thinking about desktop first, even though you are working on a desktop computer to make your site. Foundation is a MOBILE first theme, so you have to think this way. In our example below, we are going to be working with a 3 column stack. We will want the columns to be 1-2-3 on desktop but 2-1-3 on mobile.

First thing to do is to turn off Tablet Sizing Setup and only use the Mobile Sizing Setup (just for now, we will add the Tablet one later).

Foundation 3 Column Stack Settings

When you do this you will see the columns change from 3 horizontally to 3 vertically. Like this:

Foundation Columns Stack in RapidWeaver

Once you have the columns like that, add your content. Since we are working in mobile, you will want to add your content for column 2 on desktop first, since that is the column you want on top on mobile. Under that should be the content for Column 1 and finally the content for Column 3.

Now turn back on Tablet Sizing

Foundation 3 Column Stack Settings

When you do that, you will notice the columns change back to 3 horizontally.

Foundation Column Stacks in RapidWeaer

Now, we need to adjust the settings for Column 1 and Column 2 (settings area). For both of these, change the Alignment setting from Inherit to Source Order. Then you will want to push Column 1 settings 4 spots and pull Column 2 settings 4 spots (please note, when I mention Column 1 and Column 2 here, I am talking about the settings, NOT what is in the header stacks).

Foundation 3 Column Stack Settings

Once this is done, you will see this in edit mode:

Foundation Column Stacks in RapidWeaver

Now you are set to go, publish your page and test it out.

Now go forth and make your websites great!