Mover una capa detrás de otra capa hermana de forma global

[frandotouro]

¡Hola!

Llevo días intentando hacer una cosa que no me sale. Resulta que tengo dos capas y quiero mover la primera justo después de la otra. Hasta ahí es fácil, pero el problema es que tengo tres estructuras de esas capas iguales, por lo que se complica la cosa.

Me explico, yo tengo esto:

Código HTML:

<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>

<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>

<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div> 

Y me gustaría mover el .div1 para ponerlo después de su hermano .div2, pero en su mismo grupo (en cada container).

Otra complicación que me surje es que no vale hacer algún evento estilo click si no que tiene que suceder al cargar la página.

Espero que me puedan ayudar, saludos.

PD: El lenguaje que estoy usando es jQuery

[tredio]

Código Javascript:

$(document).ready(function(){
  $('.div1').each(function(){
    $(this).appendTo($(this).parent());
  });
});