How to get flex box to move up into available space?

Question

Including margins, I've set the combined height of boxes A + C (and A + D) to be equal to the height of box B.

The idea is that C and D sit underneath box A, while box B sits to the right of these two.

It would look something like this:

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

And there is a not working fiddle here.

How would I get C and D to move up into the available space?

I could potentially put them in their own container, but I'd like it so on mobile they appear in alphabetical order. (I' haven't inluded the resizing for mobile here for the sake of simplicity)

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;
       }