orderプロパティを使うのはどうですか。
要素は、order の値の昇順に配置されます。order の値が同じ要素は、ソースコード内で現れる順に配置されます。
order - CSS | MDN
サンプル
HTML
1<div id="wrapper">
2<div id="inserted">
3挿入
4</div>
5<div id="second">
62番目
7</div>
8<div id="third">
93番目
10</div>
11<div id="first">
121番目
13</div>
14</div>
15<a href="#" id="shift">並べ替え</a>
16<a href="#" id="insert">挿入</a>
CSS
1div{
2 width:300px;
3 height:100px;
4}
5#wrapper{
6 height:auto;
7 display:flex;
8 flex-flow: column;
9}
10#first{
11 background-color:#900;
12}
13#second{
14 background-color:#090;
15}
16#third{
17 background-color:#009;
18}
19#inserted{
20 display:none;
21 background-color:#999;
22}
23.shift #first{
24 order:1;
25}
26.shift #second{
27 order:2;
28}
29.shift #third{
30 order:3;
31}
32.insert #inserted{
33 display:block;
34}
35
javascript
1var wrapper = document.getElementById('wrapper')
2document.getElementById('shift').addEventListener('click', e => wrapper.classList.toggle('shift'));
3document.getElementById('insert').addEventListener('click', e => wrapper.classList.toggle('insert'));