html - 我怎样才能把最后一个 child 移到第一个 child 面前

Question

当它处于平板电脑 View 时，我正在尝试将我的导航栏 Logo 从导航栏的末尾更改为导航栏的开头，这样我就可以在屏幕顶部显示 Logo img

这就是我的代码。我尝试对元素使用 flex 和 order，但似乎无法正常工作

@media (max-width: 1050px) {
  .navbar {
    border: 1px solid red;
    display: flex;
    flex-direction: row;
  }
  .navbar a:first-child {
    order: 5;
  }
}

<div class="navbar">
  <a href="services.html">Services</a>
  <a href="#">Product</a>
  <a href="#">Vision</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="index.html"> <img class="logo" src="img/logo.png" alt="Great Idea! Company logo."></a>
</div>

什么也没有发生，如果有人能帮助我并向我解释我做错了什么，那就太好了

Answer 1

自 order is 0 by default ，我们应该将其更改为小于 0 的值，例如 -1。

另外，你在问题中说你需要将最后一个 child 移到前面，所以你应该使用:last-child，而不是:first-child .

@media (max-width: 1050px) {
  .navbar {
    border: 1px solid red;
    display: flex;
    flex-direction: row;
  }
  .navbar a:last-child {
    order: -1;
  }
}

<div class="navbar">
  <a href="services.html">Services</a>
  <a href="#">Product</a>
  <a href="#">Vision</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="index.html"> <img class="logo" src="img/logo.png" alt="Great Idea! Company logo."></a>
</div>