Order of columns


(Eduard Avonts) #1

Is it possible to change the order of collums? Or what stack can do this?
For a website I have three collums - On iPhone I want the 2nd collumn to show first and the first show as second.
Only on a narrow screen - so not for desktop or iPad.


(Robert Ziebol 🖖🏼) #2

What columns stack are you using? There are so many out there it is impossible to tell you without that knowledge.


(Eduard Avonts) #3

I’m have Reflow -
Foundation columns
Flexcolumn
fluid columns
Pro columns
liquid columns
and of course the build in columns

If with one of these stacks i’m will be very hapy…

Thx for your fast reply


(Robert Ziebol 🖖🏼) #4

OK, since you have Foundation, here is how you do it.

  1. 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).

  2. Set up the 3 columns, as you can see here, I have ColumnTwo on top, then Column One and then Column Three.

  3. Turn on Tablet Sizing Setup and it will look like this:

  4. 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). Once this is done, you will see this in edit mode:

Now publish and check it out. You can see it working here for me
http://www.zeebedesigns.com/column-2-mobile-first/

and if you still do not understand what to do, download the small project file I have here


(Eduard Avonts) #5

THX, it the answer I was looking for now I can reorder depending of device…