#container2 > div:nth-child(1) { order:3; } #container2 > div:nth-child(2) { order:5; } #container2 > div:nth-child(3) { order:1; } #container2 > div:nth-child(4) { order:4; } #container2 > div:nth-child(5) { order:2; } .flex { display:flex; flex-direction:row; width:500px; } div { border:1px solid #cccccc; margin:5px; padding:5px; } div > div { background:#ffcc99; }
原資料 <div id="container" class="flex"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> </div> 按照 Item3、Item5、Item1、Item4、Item2 排序 <div id="container2" class="flex"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> </div>