javascript - 使用 CSS 从下到上排列元素

Question

我正在尝试将 DOM 元素的显示顺序从下到上排列。但无法找到执行此操作的方法。我是 CSS 的初学者。请帮我解决这个问题。它是由 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%;
 }