Flex盒等高行

Question

我尝试使用flexbox实现以下布局

我的标记如下：

<!-- first col -->
<div class="l-col">
  <div class="l-wrap">
    <div class="l-row l-row--brand">
      row
    </div>
    <div class="l-row">
      row
    </div>
    <div class="l-row">
      row
    </div>
  </div>
</div>
<!-- second col -->
<div class="l-col">
  <div class="l-wrap">
    <div class="l-row l-row--brand">
      row
    </div>
    <div class="l-row">
      row
    </div>
    <div class="l-row">
      row
    </div>
    <div class="l-row">
      row
    </div>
  </div>
</div>

这是一个codepen示例 http://codepen.io/magicspon/pen/doyKYW

使用了极少的代码。

每行应该是相同的高度。

标记需要保持不变，或者至少需要保留内部行的列的使用。

有什么想法？如果我能在不使用JavaScript和固定高度的情况下做到这一点，我会非常高兴。

UPDATE 总体布局，最后两列是上面提到的 （注意，我必须清除内容，因为这是一个秘密项目）