Utilização de @media screen

Olá! Quando o instrutor insere o código abaixo, está sobrescrevendo as linhas anteriores, ou seja, está alterando simulando uma visualização mobile:

.cabecalhoPrincipal-nav{
    flex-direction: column;
}

.cabecalhoPrincipal .container{
    flex-direction: column;
    align-items: initial;
    text-align: center;
}

Ele não deveria utilizar @media screen? Ou seja, essa alteração no código estaria configurada para mobile, mas somente porque ele utilizou dos recursos do navegador, o código seria semelhante a esse abaixo:

@media screen and (max-width: 480px){
.cabecalhoPrincipal-nav{
        flex-direction: column;
    }

.cabecalhoPrincipal .container{
        flex-direction: column;
        align-items: initial;
        text-align: center;
    }
} 

Pra que quando a página fosse carregada por um dispositivo móvel com resolução até 480px fosse visualizada corretamente, estou certo? Aguardo.