flexboxを使用して中央のdivを下部に配置するにはどうすればいいですか？

Question

私は3つのdivコンテナを持ち、アイテムを整列するためにflex CSSプロパティを使用しましたが、タブレットポートレートモードでは、div 2はdiv1とdiv3の下に来る必要があります。

ポートレートモードでは、div1とdiv3はそれぞれ親コンテナの50％のサイズを使用する必要があり、div2は親コンテナの100％を占有する必要があります。

.flexcontainer { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
} 
 

 
.flexcontainer>div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #e46119; 
 
    border: 1px solid #626262; 
 
    margin: 3px; 
 
}

<div class="flexcontainer"> 
 
    <div class="flex"> 1 </div> 
 
    <div class="flex"> 2 </div> 
 
    <div class="flex"> 3 </div> 
 
</div>

Answer 1

自分の位置を調整するサイズに項目、およびorderプロパティをflexプロパティを使用します。

.flexcontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexcontainer > div { 
 
    flex: 1 0 45%; 
 
    height: 100px; 
 
    background-color: #e46119; 
 
    border: 1px solid #626262; 
 
    margin: 3px; 
 
} 
 

 
.flex:nth-child(2) { 
 
    order: 1; 
 
}

<div class="flexcontainer"> 
 
    <div class="flex"> 1 </div> 
 
    <div class="flex"> 2 </div> 
 
    <div class="flex"> 3 </div> 
 
</div>