[Support request] How can I make my related pages first?

[eran]

Hi,
I have 2 right sidebar elements and I want the second one to appear first on the page. how can I achieve this?
(I add the page in a private message)

the related pages are the second sidebar

[Ying]

Hi there,

Try this CSS:

.page .inside-right-sidebar > *:nth-child(4) {
    order: 3;
}
.page .inside-right-sidebar > *:nth-child(3) {
    order: 4;
}
.page .inside-right-sidebar {
    display: flex;
    flex-direction: column;
}

[eran]

But if I add more blocks in the future, it won’t make problems?

[Ying]

But if I add more blocks in the future, it won’t make problems?

No, it won’t.

The better solution would be adding additional CSS classes to the GB containers, eg. for the related post container- related-posts and for related pages container – related-pages, then we can target them using these classes.

https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

The CSS would be:

.page .inside-right-sidebar > .gb-container.related-pages {
    order: 3;
}
.page .inside-right-sidebar > .gb-container.related-posts {
    order: 4;
}
.page .inside-right-sidebar {
    display: flex;
    flex-direction: column;
}

[Author]

Posts