Lightweight Grid Columns – reverse column order on mobile

[Lyle]

Hi Tom, et al 🙂

As the title states, I would like to reverse the column order of the LGC columns on mobile. I have a homepage with 2 columns and would like the second column to be on top on mobile if that’s possible. It’s a snap to do with a page builder, but for this site, I am avoiding them 🙂

Cheers!
Lyle

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lyle]

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 🙂

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Tom]

Yep – that’s how the sidebars in GP work 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lyle]

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”

all the stuff is up here <i class=”fa fa-bars”></i>

/lgc_column

Had to remove shortcode [] s

Cheers!
Lyle

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniel]

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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniel]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniel]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Daniel]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts