Reorder Categories in Product Page Mobile Dropdown

Hello, 

As the categories / product list automatically sorts in alphabetical order, I have used CSS to rearrange this on a desktop size screen. However, when switching to mobile it turns the horizontal bar into a dropdown category menu. I am looking for a way to reorder the categories on this list but keeping the dropdown style. I want them in the order ALL, EVERYONE, BUNDLES & KITS, BABY, MAMA. Link is https://www.sisunaturals.com/shop 

I've also attached two screenshots of what it looks like on mobile when I attempt to reorder and what it looks like without

@sisunaturals Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.ProductList-filter-list {
    display: flex !important;
    flex-direction: column;
}
/* Everyone */
.ProductList-filter-list-item:nth-child(4) {
    order: 2;
}
/* Bundles - kits */
.ProductList-filter-list-item:nth-child(3) {
    order: 3;
}
/* Baby */
.ProductList-filter-list-item:nth-child(2) {
    order: 4;
}
/* Mama */
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
}

10 minutes ago, tuanphan said:

@sisunaturals Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.ProductList-filter-list {
    display: flex !important;
    flex-direction: column;
}
/* Everyone */
.ProductList-filter-list-item:nth-child(4) {
    order: 2;
}
/* Bundles - kits */
.ProductList-filter-list-item:nth-child(3) {
    order: 3;
}
/* Baby */
.ProductList-filter-list-item:nth-child(2) {
    order: 4;
}
/* Mama */
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
}

 

@tuanphanthank you SO much! Do you know how I can get it back to a functioning drop down menu that opens and closes when you click on the arrow? Thanks in advance

@sisunaturalsokay, try this

@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex !important;
    flex-direction: column;
}
/* Everyone */
.ProductList-filter-list-item:nth-child(4) {
    order: 2;
}
/* Bundles - kits */
.ProductList-filter-list-item:nth-child(3) {
    order: 3;
}
/* Baby */
.ProductList-filter-list-item:nth-child(2) {
    order: 4;
}
/* Mama */
.ProductList-filter-list-item:nth-child(5) {
    order: 5;
}
}