时间戳

首页 > 解决方案 > 为移动设备 (CSS) 重新排序单独的嵌套 div

css - 为移动设备 (CSS) 重新排序单独的嵌套 div

问题描述

我必须为移动视图重新排序嵌套 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>

这是我的订单，我希望移动导航下拉列表如下所示：

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

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

标签： cssflexbox

解决方案

推荐阅读