Jak zamienić pozycję div'ów z taką samą klasą?

Cześć, pytanie dotyczy JavaScript.

Tak jak w temacie - szukam sposobu na zmianę kolejności wyświetlania się divów. Załóżmy, że w pliku HTML mamy 2 takie same div'y:

 
<div class="square">2</div>
<div class="square">1</div> 

Teraz pytanie: co należy zrobić, żeby to wyglądało tak:

 
<div class="square">1</div>
<div class="square">2</div> 

Myślałem, że można to zrobić tak, lecz niestety się pomyliłem :( :
Tworzę zmienną w JS:
var divs = document.querySelectorAll("div.square");

następnie zmienne pomocnicze:
`var first_div = divs[0];
var second_div = divs[1];

divs[1] = first_div;
divs[0] = second_div;`

Ktoś ma jakiś pomysł? :)

Pobrałeś elementy, ustawiłeś im wartości i czekasz na cud (nic z wynikiem nie robisz)? :D

Jak chcesz sobie po prostu odwracać listę elementów to szukaj pod hasłem flexbox i flexbox reverse

@up
Chciałem zrobić sortowanie bąbelkowe i udało mi się tylko, że sam sposób mi nie odpowiadał. Zamiast zmieniać kolejność wyświetlania się divów, to sortowałem ich wartości i podmieniałem.
Nie wydaje mi się, żebym ustawiał takie same wartości, ale dziękuję za pomoc ;)