导航栏不同的屏幕尺寸

Question

I want my navbar to be horizontal on desktop and vertical on mobile. But it doesn't work with my code. It is horizontal on desktop and mobile.

What's the issue with my code?

<ul class="topnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

.

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: space-around;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  display: none;
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}

Answer 1

Use this media for your example

@media screen and (max-width: 600px) {
  ul.topnav {
    flex-flow: column;
  }
}