Flexbox订单挑战，桌面上的高度不同

Question

我希望3个内容区域与我上传的图表对齐。如果图片链接基本上不在桌面视图中工作，则它在一列中列出2个div（名为1＆amp; 3），在下一列中列出1个div（名为2） - 在订购。进一步说明：divs 1＆amp; 3将有内容，div 2将有一个图像。

然后为了响应我需要它们作为一列排列，排序＃1，＃2＆amp; ＃3。

问题在于1和1的唯一方法3作为桌面上的一列显示是放入一个flex-direction: column的div，（但容器需要是兄弟姐妹才能响应）。所以这不起作用。 在桌面上，作为一行，＃2的高度向下推＃3（我只是在＃3上做负余量？）。

当这个组缩小到响应视图时，我需要＃3内容框位于底部。

HTML：

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

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

我一直在敲我的头，能做到吗？ 感谢您的时间并提前回复。