- This topic has 21 replies, 4 voices, and was last updated 2 years, 9 months ago by Tom.
February 1, 2017 at 1:20 am #272698Lyle
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 🙂
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorGeneratePress 1.3.44GP Premium 1.2.94February 1, 2017 at 8:30 am #272868LeoStaffCustomer SupportFebruary 1, 2017 at 9:48 am #272908TomLead DeveloperLead Developer
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.February 1, 2017 at 10:08 am #272929Lyle
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 🙂
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorFebruary 1, 2017 at 10:19 am #272931TomLead DeveloperLead DeveloperFebruary 1, 2017 at 4:55 pm #273059Lyle
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.
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>
Had to remove shortcode  s
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and ElementorFebruary 1, 2017 at 7:39 pm #273083TomLead DeveloperLead Developer
Check out the class example here: https://wordpress.org/plugins/lightweight-grid-columns/faq/November 6, 2017 at 10:38 am #417299Daniel
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 grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”]
Thanks in advance,
DanielNovember 6, 2017 at 10:36 pm #417553TomLead DeveloperLead Developer
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.November 7, 2017 at 12:48 am #417608Daniel
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,
DanielNovember 7, 2017 at 8:42 am #417881TomLead DeveloperLead DeveloperNovember 7, 2017 at 9:11 am #417912Daniel
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.
DanielNovember 7, 2017 at 9:03 pm #418186TomLead DeveloperLead Developer
Ah, that plugin needs an update. Can you try the latest files we have on GitHub?: https://github.com/tomusborne/lightweight-grid-columnsNovember 8, 2017 at 2:07 am #418272Daniel
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,
DanielNovember 8, 2017 at 10:08 am #418637TomLead DeveloperLead Developer
Your first/last elements need to go like this:
And so on.
Right now you have:
- You must be logged in to reply to this topic.