Html 如何使用flexbox在底部定位中心div？

我有3个div容器，并使用flex-css属性来对齐项目，但在平板电脑肖像模式下，div2应该位于div1和div3之下

在纵向模式下，div1和div3都应该使用父容器的50%大小，div2应该占据父容器的100%

.flexcontainer{
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
弯曲方向：行；
}
.flexcontainer>div{
高度：100px；
宽度：100px；
背景色：#e46119；
边框：1px实心#6262；
保证金：3倍；
}

1.
2.
3.

使用

flex

属性调整项目大小，使用

order

属性调整项目位置。

.flexcontainer{
显示器：flex；
柔性包装：包装；
}
.flexcontainer>div{
弹性：1 0 45%；
高度：100px；
背景色：#e46119；
边框：1px实心#6262；
保证金：3倍；
}
.flex:n个孩子（2）{
顺序：1；
}

1.
2.
3.