使用CSS將元素從下到上排列

Question

我正在嘗試安排DOM元素的顯示順序從底部到頂部，但無法找到實現它的方法。我是CSS的初學者。請幫我解決這個問題。它是由JS生成的動態DOM，因此無法更改HTML。

e.g：

<div> 
    <img src='abc.jpg'> 
    <a href='google.com'>Google</a> 
    <p >It is google</p> 
</div> 

預期結果：

<div> 
    <p >It is google</p> 
    <a href='google.com'>Google</a> 
    <img src='abc.jpg'> 
    </div> 

或：

<div> 
    <a href='google.com'>Google</a> 
    <p >It is google</p> 
    <img src='abc.jpg'> 
    </div> 

Answer 1

div { 
    display: flex; 
    flex-flow:wrap; 
} 
img{ 
    order: 3; 
    flex-basis: 100%; 
} 
a { 
    order: 2; 
    flex-basis: 100%; 
} 
p { 
    order:1 ; 
    flex-basis: 100%; 
} 

Answer 2

使用Flexbox的： http://jsbin.com/mesijerike

div { 
width: 200px; 
display: flex; 
flex-direction: column-reverse; 
} 

img { 
    max-width: 100% 
} 

Answer 3

你可以把這些柔性CSS盒子在父DIV

display: -webkit-flex; 
display: flex; 
-webkit-flex-direction: column-reverse;