使用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结构,因此所有元素将共享同一个容器,然后订单规则将起作用.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效