使用CSS flexbox重新排序整个页面

我需要使用Flex更改移动设备整个页面的顺序.我可以在单个容器中使用它,但是可以在页面上使用所有容器吗？这是一个例子：

.outer {
  display: flex;
  flex-direction: column;
}
#a {
  order: 4;
  background: #ccc;
}
#b {
  order: 1;
  background: #aaa;
}
#c {
  order: 3;
  background: #d33;
}
.one {
  order: 2;
  background: #aaa;
}
.two {
  order: 5;
  background: #aaa;
}

<div class="outer">
  <div id="flex">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
  </div>
  <div id="flex2">
    <div class="one">Show me 2nd</div>
    <div class="two">Show me 5th</div>
  </div>
</div>

“Show me 2nd”和“Show me 5th”只是坐在最后而不是新订单中.要确认,无法更改HTML.

JsFiddle

解决方法

您不能对不共享同一容器的元素应用带有flex的订单：

The ‘order’ property controls the order in which flex items appear within their flex container,by assigning them to ordinal groups.

Soucre

您可以更改HTML结构,因此所有元素将共享同一个容器,然后订单规则将起作用.

原文地址：https://www.jb51.cc/css/217693.html