divの下にあるdivの下にあるdivを最初に表示する

Question

divの下に来るように（HTMLの）最初のdivをプッシュダウンしようとしています。これはHTMLである：「cinner」上の相対位置でビットを試してみました：

今

<div class="cinner"> 

<div class="container1"></div> 
<div class="container2"></div> 

</div> 

、私が位置入れて、容器1はにcontainer2の下に表示したいと思いにcontainer2に、絶対に、それだけでスタックお互いの上に、コンテナ1は押し込まれません。何か案は？ありがとう。

Answer 1

二つのオプション

が逆にそれを作るために、親やお子様の両方のFlex

使用transform: scaleY(-1);を使用しないありますが

.cinner { 
 
    float: left; 
 
    -webkit-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
} 
 
.cinner div { 
 
    -webkit-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
}

<div class="cinner"> 
 

 
    <div class="container1">container1</div> 
 
    <div class="container2">container2</div> 
 

 
</div>

を命じました逆にそれを作るためにFlex

.cinnerで使用display:flex; flex-direction:column-reverseを使用は

あなたが所望の出力を見なければならない方法を明確にすることができ、行

.cinner { 
 
    display:flex; 
 
    flex-direction:column-reverse 
 
}

<div class="cinner"> 
 

 
    <div class="container1">container1</div> 
 
    <div class="container2">container2</div> 
 

 
</div>

Answer 2

フレックスボックスを使用して回答する。

.cinner { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.container1 { 
 
    height: 20px; 
 
    background: green; 
 
    order: 2 
 
} 
 

 
.container2 { 
 
    height: 20px; 
 
    background: red; 
 
    order: 1 
 
}

<div class="cinner"> 
 

 
<div class="container1"></div> 
 
<div class="container2"></div> 
 

 
</div>