[Resolved] Reverse column order in blocks

[Gerva]

Morning, here I am again asking for help 🙁
OK I can handle the reverse order in the Mobile version, but what if I want to do it in the Desktop version as well?
For an aesthetic issue I put photos on the left and text on the right, but for SEO issues the best thing is to start with H1 or H2 text on the left … suggestions
DEMO PAGE
As you can see in the demo page, right at the beginning

Thank you very much

[Gerva]

I found a solution, reverses the columns, but puts them one on top of the other ….

.column-reverse { display: flex; flex-direction: column-reverse; }
.row-reverse { display: flex; flex-direction: row-reverse; }

Another solution found but it too has some problems

.box-olg {
	display: flex;
	flex-direction: row;
}
.box-olg :nth-child(1) { order: 2; }
.box-olg :nth-child(2) { order: 1; }

I need a different solution mmmm

[Ying]

OK I can handle the reverse order in the Mobile version, but what if I want to do it in the Desktop version as well?

I’m not sure I fully understand your question.

Which section are we talking about? and why not switch the columns directedly in the page editor?

Can you explain a bit more?

And the order can be set within GB, you don’t have to use CSS:
https://docs.generateblocks.com/article/container-overview/#order

[Gerva]

Good morning.
I try to explain myself better.
Layout/Design Need.
To have the image “container 01” shown on the left of the screen and the texts “container 02” on the right.

SEO Need.
The first thing I would like the search engine to read is the H1, H2 and P text, which in the layout I draw on the right, but I would like to make it appear on the left before the image.

Actually by fiddling a little I got some results, but with several errors and problems.

I created a specific page with the two examples

DEMO PAGE

Thank you for your kind cooperation and support

[David]

Hi there,

remove any of the CSS and the CSS Classes you added to your site.
Then add this CSS:

@media(min-width: 769px) {
    .gb-grid-wrapper.row-reverse {
        flex-direction: row-reverse;
    }
}

And on any Grid Block you want to reverse add the CSS Class: row-reverse

This will only apply to Tablet and Desktop screen sizes.

[Gerva]

Fantastic
You are always number one in case of need always there.
Thank you very much and have a great day

[David]

Glad to be of help!

[Author]

Posts