Lightweight Grid Columns - reverse column order on mobile

Hi Lyle,

I have no idea how to do it with code but maybe you can make two sets of them and hide one on desktop/tablet and one of mobile?

I guess we will hear it from Tom :)

Best way to do it is to use the push- and pull- classes.

This way, you order your columns for mobile, and then push and pull them to display in a different order on desktop.

More here: http://unsemantic.com/css-documentation#6-push-amp-pull-classes

Thanks Tom and Leo,

In my research before posting, I came across these classes but thought that they were only applicable to the Bootstrap framework. Had a look through the unsenmantic docs but obviously, not a good enough one :)

That should do it :)

Yep - that's how the sidebars in GP work :)

Sorry Tom, I'm in dunce mode today :)

Tried various iterations from the unsemantic link you provided and then found this post here, and also no luck.

https://generatepress.com/forums/topic/slider-in-column-issues/

My question is, exactly where and in what format do you put the push pull values within the LGC shortcode?
This is what I have on the page now without any:

lgc_column grid="60" tablet_grid="60" mobile_grid="100" last="false" URL_TO_IMAGE /lgc_column

lgc_column grid="40" tablet_grid="40" mobile_grid="100" last="true"

/lgc_column

Had to remove shortcode [] s

Cheers!
Lyle

Check out the class example here: https://wordpress.org/plugins/lightweight-grid-columns/faq/

Hi Tom,

it seems i cant get my head around this one. How does push and pull work together with last="true/false" ?

If i want to change the order of these columns on mobile - how do i do it?

[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false"]
[/lgc_column]

[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="true"]
[/lgc_column]

Thanks in advance,
Daniel

The order isn't changed on mobile - the order on mobile follows whatever order the columns are written in.

The order is reversed on desktop, using the push/pull classes which literally push and pull elements into separate horizontal positions.

Thanks Tom,

i still can't get this to work on my website. I tried this:

First on mobile, second on desktop:
lgc_column grid="50" tablet_grid="50" mobile_grid="100" class="push-50"

Second on mobile, first on desktop:
lgc_column grid="50" tablet_grid="50" mobile_grid="100" class="pull-50 last="true"

Where is my error? Where does the "last"-parameter belong? I also tried it on the first column, which did not work either.

Big thanks in advance,
Daniel

That looks like it should work. Can you link me to that page?

Sure: http://gritsch.netzspinnerei.at/ (in development)

When you scroll down below the header, the second and fourth row should be in reverse order. Instead they looks broken right now.
(the rows with Innovation „G-Manu“ and Collaboration „Osttirolportal“.)

I double checked the shortcodes, could not find an error.

Thanks!
Daniel

Ah, that plugin needs an update. Can you try the latest files we have on GitHub?: https://github.com/tomusborne/lightweight-grid-columns

Hi Tom,

i updated and it changed something, but it still does not work. The "pull-50" columns seem to float on the left side now.

thx for your help,
Daniel

Your first/last elements need to go like this:

first
last

first
last

first
last

And so on.

Right now you have:

first
last

last
first