根据宽度反转div的顺序

Question

我目前正在制作一个由两部分组成的菜单（见图）。在移动设备上，我想显示这些从上到下堆叠的菜单项，但从底部菜单开始到顶部菜单结束。有没有（干净的）方法用CSS做到这一点，还是我必须根据页面宽度创建两个菜单并显示正确的菜单？

编辑：澄清一下，图片只是为了展示我的意思。我更想知道是否有可能以某种方式反转CSS中的div（没有绝对定位等）。

编辑2：不添加任何代码的道歉。这是一支显示情况的小笔：https://codepen.io/anon/pen/GWwrMW

<div class="nav">
  <ul class="nav__top">
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
  </ul>
  <ul class="nav__primary">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>


.nav__top,
.nav__primary {
  list-style: none;
  margin: 0 0 20px 0;
  text-align: right;
  li {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
  }
}

在手机上，我希望子项目显示在主要项目下方。

Answer 1

您可以使用flex和flex-direction: column-reverse执行此操作，或者使用flex子级上的order属性进行更多控制。但是通过您的示例，flex-direction: column-reverse可以正常工作。

.nav__top li,
.nav__primary li {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
}

@media (max-width: 420px) {
  .nav {
    display: flex;
    flex-direction: column-reverse;
  }
  .nav li {
    display: list-item;
  }
}

<div class="nav">
  <ul class="nav__top">
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
  </ul>
  <ul class="nav__primary">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

Answer 2

这个添加的CSS将颠倒第二个菜单中的顺序：

AVPlayerItem

您可以将其置于媒体查询中。

https://codepen.io/anon/pen/ryQjdg

附加：我过度希望它水平堆叠。在这种情况下，你需要

.nav__primary {
  display: flex;
  flex-direction: row-reverse;
}

Answer 3

如果您想要响应式导航栏，则必须使用媒体查询。像这样的东西

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

如果您的菜单是按列表构建的，这将有效。

Answer 4

想出来。由于我只需要支持移动浏览器，我可以使用Flexbox：

csrf_token=<...>