Question

我必须为移动视图重新排序嵌套的div，但由于它们不是直接后代，因此我不确定如何正确完成此操作。我不知道不想更改div布局，因为那样会影响常规视图，并且除非确实需要，否则我不想修改整个NavBar。

这是div布局：

<header class="header-top">
  <nav class="navbar-primary left">
    ...
    <span class="navbar-links">
      <div class="dropbar-content show">
        ...
      </div>
    </span>
  </nav>
  <div class="profile-component">
    <div class="profile show">
      <div class="greeting">.../div>
    </div>
    <div class="authorization-links">
      <a href="#" data-test="top-link-logout" class="nav-link">Logout</a>
    </div>
  </div>
</header>

这是我的订单，我希望移动Nav下拉菜单如下所示：

header > div.profile-component > div.profile-show > div.greeting
header > nav > span.navbar-links > div.dropbar-content.show
header > div.profile-component > div.authorization-links

要使用flex进行此操作，我需要将标头设置为flex容器，但是这些项都不是flex项，因为它们不是直接后代...或者有办法吗？

重新排序移动（CSS）的单独的嵌套div

0 个答案: