在不伤害其他容器的情况下将某些容器移动到侧面

Question

我环顾四周，找不到将特定容器移动到页面两侧，同时保持其他容器完好无损的方法。

我想要实现的是分别针对移动和桌面屏幕的以下布局：Desktop and Mobile

注意颜色：移动布局上的 third 行应该成为桌面布局上的 left 列，fifth 移动布局上的行应该成为桌面布局上的 right 列。
其余行在桌面上应保留为中间列。

我试图通过使用 Flexbox 来实现这一点，但无法正确完成。

我很想听听建议。
谢谢！

Answer 1

似乎是一个有趣的练习。有点粗糙，但基础还是有的

Codepen demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  min-height: 100%;
}
.wrap {
  height: 100%;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
}
.child,
.aside {
  flex: 1;
  background: plum;
  order: 1;
}
.aside {
  background: #c0ffee;
}
@media screen and (min-width: 760px) {
  .wrap {
    flex-wrap: wrap;
  }
  .child {
    order: 2;
    width: 80%;
    flex: 1 0 25%;
  }
  .left {
    order: 1;
    width: 10%;
    flex: 0 0 100%;
  }
  .right {
    order: 3;
    width: 10%;
    flex: 0 0 100%;
  }
}

<div class="wrap">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="aside left">Three</div>
  <div class="child">Four</div>
  <div class="aside right">Five</div>
  <div class="child">Six</div>
</div>

在不伤害其他容器的情况下将某些容器移动到侧面

Moving certain containers to sides without harming other containers

css

flexbox