如何让柔性盒移动到可用空间？

Question

包括边距，我将框A + C（和A + D）的组合高度设置为等于框B的高度。

这个想法是C和D位于方框A的下方，而方框B则位于这两个方框的右侧。

它看起来像这样：

|A___||B_|
|C||D||__|

并且有一个不起作用的小提琴here。

如何让C和D升级到可用空间？

我可以将它们放在自己的容器中，但我喜欢它，所以在移动设备上它们按字母顺序显示。 （为了简单起见，我还没有在这里调整移动设备的大小）

HTML

<div class="dashcontainer ">
    <div class="A flexchild"></div>
    <div class="B flexchild"></div>
    <div class="C flexchild"></div>
    <div class="D flexchild"></div>
    <div class="E flexchild">This is a spacer. 
    <br />It will be removed.</div>
    <div class="F flexchild"></div>
</div>

CSS

    .dashcontainer {
        width:100%;
        border:1px solid red;
        box-sizing: border-box;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .flexchild {
        margin:10px;
        border-radius:5px;
    }
    .A {
        background-color:yellowgreen;
        height:30px;
        width:calc(70% - 20px);
    }
    .B {
        background-color:darkgreen;
        height:70px;
        width:calc(30% - 20px);
    }
    .C {
        background-color:blue;
        height:38px;
        width:calc(35% - 20px);
    }
    .D {
        background-color:indianred;
        height:38px;
        width:calc(35% - 20px);
    }
    .E {
        font-size:12px;
        background-color:darkorange;
        height:30px;
        opacity:0.5;
        width:calc(30% - 20px);
    }
    .F {
        height:30px;
        width:calc(100% - 20px);
        background-color:pink;
       }