Упорядочить элемент снизу вверх, используя CSS

Question

Я пытаюсь упорядочить элементы DOM, отображая порядок внизу. Но не могу найти способ сделать это. Я новичок в CSS. Пожалуйста, помогите мне решить эту проблему. Это динамический DOM, созданный JS, поэтому он не может изменить 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

Использование Flexbox: 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;