Mobile stacked columns ordering is making my head explode

Foundry
1

I’ve watched the Columns video several times and there’s something just not clicking for me, so I wonder if any kind soul can help me out.

I’m attaching a screenshot of my desktop layout together with numbers indicating how I’d like these columns to stack on mobile.

Essentially on tablet and desktop it goes 1-2-4-3 (with two columns of unequal width)
And on mobile it needs to go - 1-2-3-4 (with single columns of the same width)

I understand this is probably me being very slow on the uptake but I can’t work out how to design this so that the order re-arranges.

Ordering
Ordering972×661 66.9 KB

Any help appreciated.

Rob

2

Hi @Rob

Why not just use a single column stack with for 4 columns instead of 2 each?
Any reason?

Screen Shot 2020-05-29 at 12.51.51
Screen Shot 2020-05-29 at 12.51.511194×709 13.8 KB

1 Like
3

Not sure I understand Vitor. The ordering needs to be different on desktop as per my screenshot, so:

1 2
4 3

Then mobile:
1
2
3
4

Thanks

4

I’m guessing Rob wants to use Ordering to make sure that the mobile outcome is photo, text, photo, text.

I would do this with two column stacks on top of one another. The first column stack will be normal, nor ordering needed. The second columns stack will have ordering applied, like so:

CleanShot 2020-05-29 at 08.33.14
CleanShot 2020-05-29 at 08.33.14336×665 37.8 KB

In both columns stacks the photo will be in the left-hand column and the text in the right.

Here’s sample project: ordering.rw8.zip • Droplr

Ordering can take a little while to wrap your head around, but when it clicks it’ll be an AH-HA! moment and I think you’ll get it from then on.

1 Like
5

Cheers Adam. Lunchtime here in the UK so will try afterwards.

OK, your example works perfectly, but mine is slightly different and I wonder if that’s where the problem lies for me. My columns aren’t equal width.

The first testimonial is a 2 and a 10.
The second is a 10 and a 2.

Is it possible to achieve the same effect with columns of unequal width?

Thanks

Rob

1 Like
6

Should be no problem. Just have to change the ordering values appropriately to match your column sizes, like so:

CleanShot 2020-05-29 at 11.04.46
CleanShot 2020-05-29 at 11.04.46343×703 45.6 KB

Here’s a sample project: ordering-2.rw8.zip • Droplr

7

Right, so I set up both sets of two columns with the small image on the left and the longer text on the right (even though I want them to alternate on the page on tablet and above). And THEN I use the Ordering feature to push and pull the alternate column stacks into the correct position.

Many thanks for helping me with this.

2 Likes
8

Bingo! You got it. Mobile first, basically.

:+1:

9

Nope, it’s not the mobile first thing that threw me. It’s the building the second two column stack ‘wrong’ and then using pull and push to make it ‘right’.

Anyway, that’s enough developer-bothering for one night…

50 minutes more and I can have a Shepherd Neame Master Brew!

10

That’s what I meant by mobile first. Designing the content for mobile breakpoint first, photos on the left, text on the right, and then setup the push and I pull for tablet and desktop to swap them for those breakpoints. Sorry if that wasn’t clear in what I said.