インラインで注文されたDIVを整列させますか？

Question

父親のdivにdisplay: flex; flex-direction: column;を使用すると、どのように子divsの一部を並べ替えることができますか？

子divsにdisplay: inline-blockを使用しようとしましたが、float:leftでも、この作業はありません。

#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.item 
 
{ 
 
    border: 1px dotted; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.item1 { 
 
    order: 2; 
 
} 
 
.item2 { 
 
    order: 1; 
 
} 
 
.item3 { 
 
    order: 3; 
 
}

<div id="container"> 
 
    <div class="item1 item" >2</div> 
 
    <div class="item2 item" >1</div> 
 
    <div class="item3 item" >3</div> 
 
</div>

Answer 1

.item 
 
{ 
 
    border: 1px dotted; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
} 
 
.item1 { 
 
    order: 2; 
 
    display: block; 
 
} 
 
.item2 { 
 
    order: 1; 
 
    float: left; 
 
} 
 
.item3 { 
 
    order: 3; 
 
}

<div id="container"> 
 
    <div class="item1 item" >2</div> 
 
    <div class="item2 item" >1</div> 
 
    <div class="item3 item" >3</div> 
 
</div>

Answer 2

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.item { display: flex; } 
 
.item1 { flex: 1 0 45%; order: 2; } 
 
.item2 { flex: 1 0 60%; order: 1; } 
 
.item3 { flex: 1 0 45%; order: 3; } 
 

 
.item > span { 
 
    border: 1px dotted; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.item2 > span { margin: 0 auto; } 
 
.item1 > span { margin-left: auto; } 
 
.item3 > span { margin-right: auto;}

<div id="container"> 
 
    <div class="item1 item"><span>2</span></div> 
 
    <div class="item2 item"><span>1</span></div> 
 
    <div class="item3 item"><span>3</span></div> 
 
</div>