[Resolved] Rearrange Grid Order On Mobile

[Harvey]

Hey guys,

I’ve got a product table box which looks like the following on desktop: https://i.imgur.com/iF7xCbm.jpg

On desktop it’s clear that the center item (grid 2) is the most important item, however when we switch to mobile view, it will show up second.

I’d like the middle grid item (‘Nordic mini’) to show up first on mobile.

Any ideas for a fix to this? Or will it be too difficult?

Cheers!

[David]

Hi there,

can i see the grid on the site ?

[Harvey]

Hey mate,

Sure – if you go to https://jumpstronger.com/best-nordic-benches-2 you’ll see what I mean.

I was actually able to come up with a work-around for this which I’m happy has solved the issue (although I haven’t deployed it on the above page yet), although I’ve only tested it on my one device and it’s no where near perfect… But essentially since there’s 3 product boxes, which stack vertically on mobile, and we’re just trying to switch the order of the first and second product… I just used a mobile-only ‘top margin’ for the first two boxes – I pushed the first box down the page and pulled the second box up…

I should probably be in prison for doing that, as far as best practices go.

Do you think this will mess things up for mobile devices with different sized screens?

As always, love your work David!

[Fernando]

Hi Harver,

There is an order attribute for Grid Columns on mobile.

You can set the most important column to -1 on mobile. This should be the proper way of doing it.

Example: https://share.getcloudapp.com/WnuZZjew

[Harvey]

Mate that is EXACTLY what I was looking for! Thanks so much.

You guys are the greatest!

[Fernando]

You’re welcome, Harvey!

[Author]

Posts