Order aplicado no elemento filho

Para alterar a ordem dos itens, fazendo:

@media (min-width: 1440px) {
  .menu {
    column-gap: 95px;
  }

  .menu :nth-child(1) {order: 1;}

  .menu :nth-child(2) {order: 3;}

  .menu :nth-child(3) {order: 4;}

  .menu :nth-child(4) {order: 5;}

  .menu :nth-child(5) {order: 2;}
}

funciona e fica da maneira correta. Fazendo como o professor, aplicando na classe .menu__item não funciona:

<header>
        <nav>
            <ul class="menu">
                <li class="menu__item">
                    <h1 class="menu__titulo"></h1>
                </li>
                <li class="menu__item">
                    <a href="#" class="">Programação</a>
                </li>
                <li class="menu__item">
                    <a href="#">Categorias</a>
                </li>
                <li class="menu__item">
                    <a href="#">Seu local</a>
                </li>

                <li class="menu__item menu__pesquisar">
                    <label class="menu__label" for="pesquisar">
                        <input type="search" name="pesquisar" class="menu__input" placeholder="O que você procura?"
                            id="pesquisar">
                    </label>
                </li>
            </ul>
        </nav>
    </header>

.menu {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  column-gap: 30px;
}

@media (min-width: 720px) {
  .menu {
    column-gap: 70px;
  }
}

@media (min-width: 1440px) {
  .menu {
    column-gap: 95px;
  }

  .menu__item :nth-child(1) {
    order: 1;
  }

  .menu__item :nth-child(2) {
    order: 3;
  }

  .menu__item :nth-child(3) {
    order: 4;
  }

  .menu__item :nth-child(4) {
    order: 5;
  }

  .menu__item :nth-child(5) {
    order: 2;
  }
}

Alguém sabe o que está errado?