[Resolved] css to change order of flex items

[Halil]

hi,
is it possible to define order of items and/or number of items to show in a column for flex box?

I have HTML sitemap on my page where “posts” and “categories” appear on the left column and pages on the right column.

How should I change my css code so that ONLY “posts” sit on the left column and “categories” & “pages” on the right column? Also is it possible to change the order of items, ie can I put “categories” first then “pages” on the right column?

[David]

Hi there,

can’t be done with Flex unless you use column-wrap and fix the height of those columns.
you can use CSS Grid like so:

@media(min-width: 768px) {
    /* create 2 column grid */
    .entry-content .rank-math-html-sitemap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    /* Force post list to fill entire column */
    .rank-math-html-sitemap__section--post {
        grid-column: 1;
        grid-row: 1 / -100;
    }
}
/* force page list to show last */
.rank-math-html-sitemap__section--page {
    order: 10;
}

[Halil]

excellent, thanks a lot David

[David]

You’re welcome

[Halil]

you guys are the best customer support team I’ve ever seen.

[David]

That’s really kind of you – much appreciated !!

[Author]

Posts