Archived topic
css to change order of flex items
5 replies · Started by Halil on January 10, 2023
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?
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;
}excellent, thanks a lot David
You're welcome
you guys are the best customer support team I've ever seen.
That's really kind of you - much appreciated !!