CSSを使用して下から上に要素を配置

Question

DOM要素の表示順序を下から上に並べ込みようとしていますが、その方法を見つけることができません。私はCSSの初心者です。私はthis.Itを解決するのを助けてくださいJSによって生成された動的DOMですので、HTMLを変更することはできません。

例えば：

<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

使用フレキシボックス： http://jsbin.com/mesijerike

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

img { 
    max-width: 100% 
} 

Answer 3

あなたは自分の親のdivに

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