ブートストラップを使わないdivの並べ替え

Question

ブートストラップライブラリを使用しないと、2つのdivの順序をどのように変更できますか？何か方法はありますか

<div class='parent'> 
<div class='child-1'>Abc..</div> 
<div class='child-2'>Xyz..</div> 
</div> 

私は子供2を上に見せたいと思います。

Answer 1

。これは、自動的に順序を逆にして垂直方向にそれらをスタックします：

.parent { 
 
     display: flex; 
 
     flex-direction: column-reverse; 
 
}

<div class='parent'> 
 
<div class='child-1'>Abc..</div> 
 
<div class='child-2'>Xyz..</div> 
 
</div>

Answer 2

flex-direction: column;のフレックスボックスを親に使用し、メディアクエリでorderプロパティを使用して要素の順序を変更します。あなたはメディアクエリで.parentにこのCSSルールを使用することができます

.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
@media (max-width: 420px) { 
 
    .child-2 { 
 
    order: -1; 
 
    } 
 
}

<div class='parent'> 
 
<div class='child-1'>Abc..</div> 
 
<div class='child-2'>Xyz..</div> 
 
</div>