将弹性项目放置在网格中彼此的顶部而不包裹它们[重复]

我使用 Flexbox 有以下布局：

我想让 div 包含2在右侧，以及Team and Scorers应该弥补它左边的空间。

Required layout:

这和下面的想法是一样的2如果使用表格，div 的行跨度为 2。

有没有办法定位Team and Scorers放在 2 的左边而不将它们包装在自己的 div 中？如果是这样，值得这么麻烦吗？

到目前为止，这是我的 CSS：

.container {
  max-width: 600px;
}

.team {
  background-color: chartreuse;
}

.score {
  background-color: brown;
}

.scorers {
  background-color: steelblue;
}

.cards-desktop {
  background-color: goldenrod;
}

.carded-players {
  background-color: darkorange;
}

.left-col {
  display: flex;
  flex-flow: row wrap;
}
.left-col > * {
  flex: 1 100%;
}

.team {
  order: 1;
}

.score {
  order: 3;
}

.scorers {
  order: 2;
}

.cards-desktop {
  order: 4;
}

.carded-players {
  order: 5;
}

.team {
  flex: 1 auto;
}

.score {
  flex: 0 150px;
  font-size: 60px;
}

其他断点上的布局会有所不同，因此我希望有一个不会因其他断点而重复或模仿的 HTML 块。这就是为什么我不想将这两个 div 包装在一个容器中，因为它在其他断点的布局上是不必要的。

代码笔链接 http://codepen.io/alanbuchanan/pen/EKdjNM?editors=1100

Here..

将 1、2 和 3 包裹在自己的 div 中display:flex / flex-direction:column / flex-wrap:wrap.

然后设置各个组件的宽度以适应。

不幸的是，我认为 Chrome 需要在包装器上有一个固定的高度来强制包装（我认为这是一个错误）......这就是你的情况。

* {
  box-sizing: border-box;
}
.team {
  background: chartreuse;
}
.score {
  background: brown;
}
.scorers {
  background: steelblue;
}
.cards-desktop {
  background: goldenrod;
}
.carded-players {
  background: darkorange;
}
.wrap {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.top > div {
  padding: 5px;
}
.bottom > div {
  height: 25px;
}
.top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
}
.team,
.scorers {
  height: 50%;
  width: 75%;
}
.score {
  width: 25%;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

<div class="wrap">
  <div class="top">
    <div class="team">Team</div>
    <div class="scorers">Scorers</div>
    <div class="score">
      <h1>2</h1>
    </div>
  </div>
  <div class="bottom">
    <div class="cards-desktop">cards-desktop</div>
    <div class="carded-players">carded-players</div>
  </div>
</div>