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');
});
});