使用flexbox包装和列（可以实现吗？）

Question

我刚刚开始使用flexbox工作。现在我有了一个我想用flexbox实现的屏幕设计。

桌面视图中应该有两个颜色，移动设备上只有一个颜色。在桌面视图中，几个框应位于右列，其他框应位于主列中。 I uploaded an image, which should describe it even better

在移动设备上B应该在A下，但这对我来说没问题。

我刚刚使用flexbox来解决方框B和D之后的元素，但是现在它对我不起作用。

所以现在我有了一个问题，一般情况下是否可能，或者我是否需要使用网格或类似工具？如果是的话，你能给我一个解决方案的提示吗？

我玩了以下代码：

#container-main {
    display: flex;
    flex-wrap: wrap;
}

.container-flex {
    background-color: #CBCBCB;
    padding: 5px;
    margin: 5px;
}

.a {
    flex: 2 0 auto;

}

.b {
    flex: 2 0 auto;
}

.c {
    flex: 4 0 auto;
}

<div id="container-main">
  <div class="container-flex a">
  </div>
</div>

此致 马库斯