Flexbox order challenge, differing heights on desktop

Question

I would like 3 content areas to align like the diagram I uploaded. If the image link doesn't work basically in desktop view it's 2 div's in one column (named 1 & 3), and 1 div in the next column (named 2) - in that order. Further description: divs 1 & 3 will have content, div 2 will have an image.

Then for responsive I need them to all line up as a column, ordered #1, #2 & #3.

The trouble is that the only way for 1 & 3 to display as a column on desktop is to put into a div with flex-direction: column, (but the containers need to be siblings for responsive). So that doesn't work. On desktop, as a row, the height of #2 pushes #3 down (do I just do negative margin on #3?).

When this group is narrowed to responsive view I need the #3 content box to be on the bottom.

HTML:

<section>
    <div class="box one">1</div>
    <div class="box three">3</div>
    <div class="box two">2</div>
</section>

The CSS:

[
    section {
    display: flex;
    flex-direction: column;
}

.box {
    padding: 4em;
    margin: 15px;
    border: 1px solid #ccc;
    background-color: #f6f6f6;
}

.two {
    flex: 2;
}

@media screen and (max-width: 750px) {
    section {
        display: flex;
        flex-direction: column;
    }
    .one {
        order: 0;
        flex: 1;
    }
    .two {
        order: 1;
    }
    .three {
        order: 2;
    }
}

]1

I have been knocking my head on this, can it be done? Thank you for your time and reply ahead of time.