Как повернуть z-index на сложенные div
У меня есть несколько столбцов на странице, завернутые в div таким образом:
<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>
Я в основном использую плагин, который колонизирует текст и размещает его слева направо. В моем CSS я переставляю их так, чтобы они накладывались друг на друга, а затем я использую некоторые jquery для перемещения каждого столбца. Проблема в том, что они складываются в неправильном порядке. Последний столбец - первый, первый столбец находится внизу.
Здесь CSS
#reader .column {
position:absolute;
top:0;
left:0;
background:#fff;
}
Что я могу сделать, чтобы изменить порядок наложения? Лучшее решение использовать jQuery для добавления z-индекса к каждому div? Я не совсем, как это сделать, JS не моя сила. Это также кажется мне хрупким. Есть ли способ просто изменить порядок наложения? Вот мой очень простой jQuery:
$(function(){
$('#reader-inner').columnize();
$('.column').click(function() {
$(this).clearQueue().animate({left:'-550'},500, 'swing');
});
});