Ebeveyn divundan ÖNCE bir çocuk div nasıl görüntülenir?

Question

3 elementim var ve üçüncü ekranın önceki 2'den önce gösterilmesini istiyorum. Üçüncüsü de bir görüntüdür ve yükseklik her bir içerikten farklılık gösterir.

Ben yapısı şöyledir:

<div class="first"> 
.. 
</div> 

<ul> 
<li>..</li> 
</ul> 

<div class="image"> 
</div> 

nasıl css ile ilk div önce resmi görüntüleyebilir? Bu yapılandırma ile mümkün değilse, ul için yeni bir div oluşturabilirim, ancak sadece mümkün değilse.

Answer 1

bir çözüm order esnek özelliğini kullanmak olacaktır:

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.image { 
 
    order:-3; 
 
}

<div class="first"> 
 
first 
 
</div> 
 

 
<ul> 
 
<li>li</li> 
 
</ul> 
 

 
<div class="image">image 
 
</div>

Ek: FlexBox compatibility