Layout Grid Column Order.

[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.

[crispy68]

Unfortunately no.

However, it can be achieved with flexgrid.

[44MLB]

I have kept away from Flex Grids as the don't work in older browsers. I presume Layout Grids do?

[Pablo]

Correct, Layout grids do work with older browsers.

[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.

[44MLB]

Many thanks gofrank

[Lasa]

I like the option!
Lasa

[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]

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]

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

[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]

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