On my webpage, I have set up multiple columns enclosed in divs like this:
<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>
The plugin I am using formats the columns from left to right. However, when I adjust them in CSS to stack on top of each other and use jQuery to move them individually, they end up stacking in reverse order - the last column appears first, while the first column is at the bottom.
Here's a snippet of the CSS code:
#reader .column {
position:absolute;
top:0;
left:0;
background:#fff;
}
I need help changing the stacking order. Would adding a z-index to each div using jQuery be the best solution? I'm not very familiar with JavaScript and worry about its reliability. Is there a simpler way to reverse the stacking order? Below is the jQuery code I am currently using:
$(function(){
$('#reader-inner').columnize();
$('.column').click(function() {
$(this).clearQueue().animate({left:'-550'},500, 'swing');
});
});