Oi, Miguel, tudo bem?

O @media é uma regra do CSS que permite aplicar estilos diferentes com base em determinadas condições, como a largura da tela. Ele pode ser colocado em qualquer lugar do seu código CSS, não necessariamente no final. A ordem em que as regras CSS são declaradas é importante, pois as regras que vêm depois podem sobrescrever as regras anteriores. No seu caso, pode ser que as propriedades declaradas antes do @media estejam sendo sobrescritas pelas propriedades declaradas depois. Ao colocar o @media no final do código, as propriedades dentro dele estão sendo aplicadas corretamente porque estão sendo declaradas por último.

Uma alternativa para resolver esse problema é garantir que as propriedades dentro do @media sejam mais específicas do que as propriedades declaradas fora dele.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!