响应式布局，为小屏幕重新排列小部件

Question

已经提出并回答了类似的问题（例如，this –使用单个父容器，或者this –使用JS解决方案，具有网格状布局），但是没有一个提供正确的答案灵感;基本上，我了解到我不能将flex子代从单个容器中取出，另一方面，flexbox可以方便地更改块的顺序，或者我可以更改标记以同时具有桌面布局的灵活性和移动块的重新排序。

我也了解到我可以使用JS来修改不同屏幕的标记，但这对我来说有点老套了，所以我想获得新的想法，以解决当今技术的难题，最好是纯技术。 CSS。而且，如果钱包CSS不可行，我会欢迎轻量级JS想法。

用例：

我有一个用户可配置的布局，在这里我利用嵌套容器在布局配置中提供了很大的灵活性-每个“子级”都可以以2种方式进行拆分-水平或垂直，具有未知的嵌套级别和未知的窗口小部件尺寸。在桌面上看起来像这样：

.container {
  width: 100%;
  background: #eee;
}

.split-horizontal,
.split-vertical {
  display: flex;
  width: calc(100%-15px);
  height: 100%;
  flex-basis: 50%;
}

.split-horizontal {
  flex-flow: column;
}

.half {
  flex-basis: 50%;
}

.tall {
  height: 200px;
}

div {
  margin: 5px;
  padding: 5px;
  border: 1px solid gray;
  min-height: 50px;
  box-sizing: border-box;
  position: relative;
}

div:before {
  content: "." attr(class);
  color: gray;
  background: #eee;
  border: 1px solid gray;
  padding: 0 5px;
  margin-left: 5px;
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 0.8em;
}

.widget {
  background: navy;
}

.widget.w5 {
  background: blue;
}

<div class="container split-vertical">
  <div class="split-horizontal">
    <div class="half">
      <div class="widget w1"></div>
      <div class="widget w2"></div>
    </div>
    <div class="split-vertical">
      <div class="half">
        <div class="widget w3"></div>
      </div>
      <div class="half">
        <div class="widget w4"></div>
      </div>
    </div>
  </div>
  <div class="split-horizontal">
    <div class="split-vertical">
      <div class="half tall">
        <div class="widget w5"></div>
        <div class="widget w6"></div>
      </div>
      <div class="half">
        <div class="widget tall w7"></div>
      </div>
    </div>
    <div class="half">
      <div class="widget w8"></div>
    </div>
  </div>
</div> 

https://codepen.io/peter-sliacky/pen/LXvdaK

在小屏幕上，我只是删除了flex属性，它的行为是“某种程度上”，但是我想向用户提供小屏幕布局的定义-基本上只是小部件块的顺序（{.w5在{{ 1}}），如下所示：

.w2

.container {
  width: 300px;
  background: #eee;
}

.split-horizontal {
  flex-flow: column;
  display: flex;
}

div {
  margin: 10px;
  padding: 5px;
  border: 1px solid gray;
  min-height: 30px;
  box-sizing: border-box;
  position: relative;
}

div:before {
  content: "." attr(class);
  color: gray;
  background: #eee;
  border: 1px solid gray;
  padding: 0 5px;
  margin-left: 5px;
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 0.8em;
}

.widget {
  background: navy;
}

.widget.w5 {
  background: blue;
}

.w1, .w2, .w5 {
  order: -1;
}

https://codepen.io/peter-sliacky/pen/EOJpqr