title: Positioning flex items on top of each other in grid without wrapping them
body: <p>I have the following layout using flexbox:</p>
  
  <p><a href="https://i.stack.imgur.com/xvmKP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xvmKP.png" alt="enter image description here"></a></p>
  
  <p>I want to have the div containing <code>2</code> on the right hand side, and the <code>Team</code> and <code>Scorers</code> should make up the space to the left of it.</p>
  
  <p>Required layout:
  <a href="https://i.stack.imgur.com/TZU4r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TZU4r.png" alt="enter image description here"></a></p>
  
  <p>It's the same idea as the <code>2</code> div having a rowspan of 2, if using a table.</p>
  
  <p>Is there a way to position <code>Team</code> and <code>Scorers</code> to the left of 2 without wrapping them in their own div? If so, is it worth the trouble?</p>
  
  <p>Here is my CSS so far:</p>
  
  <pre><code>.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 &gt; * {
    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;
  }
  </code></pre>
  
  <p>The layout will be different on other breakpoints, so I want to have one HTML block that doesn't get duplicated or mimicked for other breakpoints. That's why I don't want to wrap these two divs in a container, because it's unnecessary on other breakpoints' layouts.</p>
  
  <p><a href="http://codepen.io/alanbuchanan/pen/EKdjNM?editors=1100" rel="nofollow noreferrer">Codepen Link</a></p>