Flexbox充当浮动

Question

我有一个使用flexbox的网格系统。目前我正在尝试解决是否可以使用以下方案。

<div class="flex-outer">
    <div class="flex-inner span-all red-box">
        <h2>Title</h2>
    </div>
    <div class="flex-inner span-1of2 green-box">
        <div>Some text</div>
    </div>
    <div class="flex-inner span-1of2 blue-box">
        <p>A table perhaps</p>
    </div>
</div>

.flex-outer {
    display:flex;
    flex-wrap:wrap;
}
.span-all {
    width:100%;
}
.span-1of2 {
    width:50%;
}
.red-box {
    background-color:Red;
}
.green-box {
    background-color:Green;
}
.blue-box {
    background-color:blue;
}

上面的html可用于创建以下布局：

但是在某个断点上，我想要将布局更改为：

我可以更改绿色和蓝色框的顺序以适应，但在包装时，第二个框位于蓝色框下方。 这是我预期的行为。

那么，是否有任何我可以使用的弹性盒技巧将绿色盒子塞在红色的盒子下方？