Facing some problem with css @media query

It is working fine when I'm applying it to body color, or changing font-size but when it comes to make element float or flex-direction, it does not respond at all. Tried in every way possible just not sure what's not working here: please do check the code , I think syntax is proper because it is giving me result as mentioned.

.navbar {
    background-color: #333;
    overflow: hidden;
    display: flex;
}

.navbar a  {  
    text-decoration: none;
    color: white;
    padding: 24px;
    display: block;
    text-align: center;
}

@media screen and (max-width:600px) {
    .navbar a {
      flex-direction: column;
   }
}