[Sugestão] Ordenador abaixo dos filtros

Eu vi no forúm que uma pessoa também ficou com o "Ordernar por" abaixo dos filtros. A solução é ir no arquivo Cardapio.module.scss e colar o seguinte código:

Obs: pode haver divergência quanto a importação do breakpoint ou variaveis, alterar conforme sua IDE.

@import '../../styles/breakpoint';
@import '../../styles/variaveis';

.menu {
  padding: 20px $padding-horizontal;
  @media (max-width: $desktop_xsm) {
    padding: 20px $padding-horizontal-mobile;
  }
  @media (min-width: $desktop_xsm) and (max-width: $desktop_sm) {
    padding: 20px $padding-horizontal-sm;
  }
  @media (min-width: $desktop_sm) and (max-width: $desktop_md) {
    padding: 20px $padding-horizontal-md;
  }
}

.header {
  align-items: center;
  background-image: url("/assets/cardapio/header.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  height: 300px;
  padding: 0px $padding-horizontal;
  @media (max-width: $desktop_xsm) {
    padding: 0px $padding-horizontal-mobile;
  }
  @media (min-width: $desktop_xsm) and (max-width: $desktop_sm) {
    padding: 0px $padding-horizontal-sm;
  }
  @media (min-width: $desktop_sm) and (max-width: $desktop_md) {
    padding: 0px $padding-horizontal-md;
  }
  &__text {
    color: white;
    font-size: 5rem;
    min-width: 400px;
    width: 40%;
  }
}

.cardapio {
  padding: 50px $padding-horizontal;
  @media (max-width: $desktop_xsm) {
    padding: 50px $padding-horizontal-mobile;
  }
  @media (min-width: $desktop_xsm) and (max-width: $desktop_sm) {
    padding: 50px $padding-horizontal-sm;
  }
  @media (min-width: $desktop_sm) and (max-width: $desktop_md) {
    padding: 50px $padding-horizontal-md;
  }
  &__titulo {
    color: $dark;
    font-size: 3rem;
    margin-bottom: 30px;
  }
  &__filtros {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    width: 100%;
  }
}