Layout Grid Column Order.

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
44MLB
 
 
Posts: 144
Joined: Sun May 27, 2018 11:55 am

Layout Grid Column Order.

Post by 44MLB »

Example.

I have a layout grid with two columns. The left-hand column has text and the right-hand column has a photo. At the break point by default the text will be at the top. Is there any way to swap this to have the photo at the top.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid Column Order.

Post by crispy68 »

Unfortunately no.

However, it can be achieved with flexgrid.
44MLB
 
 
Posts: 144
Joined: Sun May 27, 2018 11:55 am

Re: Layout Grid Column Order.

Post by 44MLB »

I have kept away from Flex Grids as the don't work in older browsers. I presume Layout Grids do?
User avatar
Pablo
 
Posts: 21585
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Layout Grid Column Order.

Post by Pablo »

Correct, Layout grids do work with older browsers.
User avatar
gofrank
 
 
Posts: 181
Joined: Sun Dec 30, 2007 2:43 am
Location: Florida, USA

Re: Layout Grid Column Order.

Post by gofrank »

There is an alternative that I have used that works.

Make a copy of the layout grid with text and photo. In the copy, swap the positions so the photo is in column 1 and the text in column 2. Then, hide the grid.

At the point where the design breaks, switch the original grid to hidden and display the second grid (with the photo in column 1).

While this does add to the page weight, it gives you the flexibility to achieve the design you want using layout grids.
Billing clients for your freelance work? Try Minute-2-Minute, the project management, timing, and billing system. Perfect for web developers who charge by the hour. FREE 45-day trial.
44MLB
 
 
Posts: 144
Joined: Sun May 27, 2018 11:55 am

Re: Layout Grid Column Order.

Post by 44MLB »

Many thanks gofrank :-)
Lasa
 
 
Posts: 482
Joined: Sat Oct 06, 2018 3:08 pm

Re: Layout Grid Column Order.

Post by Lasa »

I like the option!
Lasa
Lasa
 
 
Posts: 482
Joined: Sat Oct 06, 2018 3:08 pm

Re: Layout Grid Column Order.

Post by Lasa »

I wonder if this gofrank workaround is still needed... I've been using it for years does layergrid / flexbox option allow the change within the breakpoint?
(Default Layergrid to show two columns order 1 and 2, then at 480 show 2 and 1?) That way the order shows picture-text, picture-text at the breakpoint.
Cheers,
Lasa
alan_sh
 
 
Posts: 1682
Joined: Tue Jan 01, 2019 5:50 pm

Re: Layout Grid Column Order.

Post by alan_sh »

There was some code I used ages ago to do this, but I can't remember what it was. I think I got it from Crispy.

I'll see if I can find it in the next day or so

Alan
Lasa
 
 
Posts: 482
Joined: Sat Oct 06, 2018 3:08 pm

Re: Layout Grid Column Order.

Post by Lasa »

Thanks Alan. The GoFrank solution works for sure, not knocking it at all, but since Web Builder does everything else I wouldn't be surprised it its figure this out as well!

Lasa
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Layout Grid Column Order.

Post by crispy68 »

Since version 16, this is now possible with layout grids. No need to add extra grids and hide them.

I created a video sometime back about this here: https://www.youtube.com/watch?v=o5-Wk8_7yFo
Lasa
 
 
Posts: 482
Joined: Sat Oct 06, 2018 3:08 pm

Re: Layout Grid Column Order.

Post by Lasa »

Thanks Crispy68,
I was almost doing it right ... but hidden is big time!
Thanks a ton for the excellent tutorial.
Lasa
Post Reply