Question

I am doing one R&D and trying to find a answer of one problem. I have 6 divs on page which contains different content. I want to move these six divs place (on live page) by changing jquery or CSS files only. For example :-

<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> 

I have coded above thing which displays content in below manner (with help of css – float) :

1 2

3 4

5 6

what script or css without changing HTML structure will help me to show content in below structure:-

6 5

3 4

2 1

can any one help me with this please.

Please let me know if I have to give any other information from my end.

Answer 1

Here’s a quick and dirty way that worked for me. I created a function which takes an array that specifies the new order for the <div> tags and uses append to reorder them.

function changeOrder(newOrder) {
    var $divs = $('div'),
        $parent = $divs.eq(0).parent();
    for (var ii = 0; ii < newOrder.length; ii++) {
        $parent.append($divs.eq(newOrder[ii] - 1));
    }
}

$(function() {
    changeOrder([6,5,3,4,2,1]);
});

Working example: http://jsfiddle.net/FishBasketGordo/XK44w/