Rankmath breadcrumb position

Hi,

Wordpress's own breadcrumb doesn't change category if you add 1 product to 2-3 categories.
But rankmath's does. Thus I want to go with that.

I did set hook. https://prnt.sc/12hs4ot
I copies this css from niche theme before and it is working great with woocommerce breadcrumb.

.woo-filter-toggle,
.woocommerce.archive .woocommerce-breadcrumb {
    padding: 0;
    margin-right: 20px;
    float: left;
    line-height: 30px;
}
.woocommerce .woocommerce-result-count {
    float: right;
    margin-right: 20px;
    line-height: 30px;
}
@media (max-width: 768px) {
    .entry-content {
        display: flex;
        flex-direction: column;
    }
}
@media(max-width: 768px) {
	.woocommerce.archive .woocommerce-breadcrumb {
    padding-bottom: 0;
		flex: 1;
  }
	.woocommerce-ordering select {
    padding: 10px;
    margin-bottom: 15px;
	}
}

I have checked and see that rankmath use this class. rank-math-breadcrumb
So I have edited code as below. But It doesn't go to upper line in mobile like the original.
Do you have any suggestion?

.woo-filter-toggle,
.woocommerce.archive .rank-math-breadcrumb {
    padding: 0;
    margin-right: 20px;
    float: left;
    line-height: 30px;
}
.woocommerce .woocommerce-result-count {
    float: right;
    margin-right: 20px;
    line-height: 30px;
}
@media (max-width: 768px) {
    .entry-content {
        display: flex;
        flex-direction: column;
    }
}
@media(max-width: 768px) {
	.woocommerce.archive .rank-math-breadcrumb {
    padding-bottom: 0;
		flex: 1;
  }
	.woocommerce-ordering select {
    padding: 10px;
    margin-bottom: 15px;
	}
}