Como reverter o índice z em divs empilhados

Eu tenho várias colunas em uma página agrupada em divs dessa maneira:

<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>

Basicamente, estou usando um plug-in que coloca em colunas o texto e as posiciona da esquerda para a direita. No meu CSS, eu os reposiciono de modo que eles empilhem uns sobre os outros, e então eu uso um pouco de jquery para mover cada coluna para fora do caminho. O problema é que eles estão empilhando na ordem errada. A última coluna é frist, a primeira coluna está na parte inferior.

Aqui está o CSS

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

O que posso fazer para alterar a ordem de empilhamento? A melhor solução é usar o jQuery para adicionar um z-index a cada div? Eu não sou inteiramente como fazer isso, JS não é minha força. Isso também parece meio frágil para mim. Existe uma maneira de simplesmente inverter a ordem de empilhamento? Aqui está o meu simples jQuery:

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

questionAnswers(3)

yourAnswerToTheQuestion