There are two ways to go about this, if you have to change the order of the HTML itself… then there’s no choice but to override the template. This isn’t the best for long-term maintainability because if we change something the template relies on, this could break your customization.
The other way would be with CSS, which should be easier to maintain. I haven’t tested this thoroughly so you’d want to keep an eye out for side-effects… but this can reorder things in the way you’re looking for:
.mobile-view .category-list {
tbody {
display: flex;
flex-direction: column
}
.subcategories-list {
order: -1
}
tr:first-child { // this is category title section
order: -1
}
}
This converts the table layout to use flexbox, which allows sibling elements to be reordered with order.
