Tengo varias columnas en una página envuelta en divs de esta manera:

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

Básicamente, estoy usando un complemento que crea una columna de texto y los coloca de izquierda a derecha. En mi css, los reposiciono para que se apilen uno encima del otro, y luego uso un poco de jQuery para mover cada columna fuera del camino. El problema es que están apilando en el orden equivocado. La última columna es primera, la primera columna está en la parte inferior.

Aquí está el CSS

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

¿Qué puedo hacer para cambiar el orden de apilamiento? ¿Es la mejor solución usar jQuery para agregar un índice z a cada div? No soy del todo cómo hacerlo, JS no es mi fuerza. Eso también me parece algo quebradizo. ¿Hay una manera de simplemente revertir el orden de apilamiento? Aquí está mi jQuery muy simple:

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});