Как повернуть 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');
    });
});

Ответы на вопрос(3)

Ваш ответ на вопрос