How to set order for stacked columns?


#1

Hello!

Is there a way to affect the order of stacked columns when the screen size is reduced from desktop to phone size?

I am asking this because I like to have bit change in layout design but it looks messy in phone size.

Sigzag layout

Responsive mode stacks headlines together, anyway for workaround?


#2

@TapioMichael: Yes, there is. You will need to use the Custom Columns feature of the stack. When you do so, you can set, at each breakpoint, an Order for each column, which lets you Push or Pull a column. This is outlined in the documentation but I cover it in a tutorial video for the Columns stack on the tutorials page in much greater detail. I would highly encourage you to watch that video. It is in the Components section of the tutorials page.


#3

Ha! I knew it it was somewhere :slight_smile:
I watched all the tutorials while ago, which btw is great, but this particular one I didn’t quite grasp it at the time… so I need to get into that bizz quickly.


#4

@elixirgraphics

How can I do ordering for mobile breakpoint? :flushed:
I have only two columns, and I wish to have the header on top for mobile.

edit: Ordering can be done for the desktop & tablet breakpoint to make it look different on them and when page resized for mobile size headers and all are as they should be? That’s why there’s no option for mobile breakpoint ordering?

I was a bit lost for I made this ‘tiled layout’ (bellow) that will flip headers wrong place for mobile, but now I can make them ‘right way’ on Foundry project and just order them to go desired way on desktop & tabled and headers should go right position with mobile. Right?


#5

You build the layout how you want to see it on the mobile display. So in this case you’d place the text for both Column stacks on the left. Then use the Ordering to feature to arrange the bottom Columns stack the way you want to see them on the Tablet and Desktop breakpoints.


#6

Excellent! I was still thinking of building from desktop display towards mobile.
Happy to have this realization for the need to change perception!

Thank you so much (also for quick reply)!


#7

It is a good thing to keep in mind for sure. Responsive design is most often about designing for the mobile experience first and working your way up from there. There’s exceptions to the rule of course but that is the general idea.


#8

@elixirgraphics,
a question about reordering Bloom stack content for a mobile breakpoint.
Looks like that image always comes top over text column when in mobile mode. Is there a way to reorder that with Column stack feature?


#9

No, the Bloom stack does not have a reordering feature. It is designed purposefully to have the image(s) at the top of the stack at the mobile breakpoint.


#10

Ok. Thanks for the confirmation :slight_smile: