我用html和css创建了这个简单的导航栏，但是当屏幕小于850 px时，我想把“Valhalla”文本移到其他列表元素的顶部。
网址：

<nav>
  <ul>
    <li><a href = "#">
      <h1>
        <span><i class="fa-solid fa-dumbbell"></i></span>
        <span>Valhalla</span>
        
        </a>
      </h1>
      </li>
    <li><a href = "#">The Gym</a></li>
    <li><a href = "#">Workouts</a></li>
    <li><a href = "#">Coaches</a></li>
    <li><a href = "#">Supplements</a></li>
  </ul>
</nav>

CSS：

nav {
  font-family: var(--mono);
  font-size: 1rem;
  padding: 1rem;
  background-color: black;
  }
nav a {
  text-decoration: none;
  color: var(--white);
}
nav a:hover{
  color: var(--green);
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-flow: row-wrap;
  align-items: center;
  gap: 1.5rem;
  
}
nav li:first-child {
  margin-right:auto;
}
.menu-btn {
  display: none;
}

@media (max-width: 850px){
}

我试过使用max-width和flex-basis来移动它：100%，所以它会占用上面的空间，但它只是移动到导航栏左侧的中心，而不是列表的其他元素上方。

@media (max-width: 850px){
  nav{
  max-width: 1200px;
  margin: 0 auto;
  }
  nav li:first-child {
  text-align: center;
  flex-basis: 100%;
}