Как динамически изменить положение деления (с помощью Jquery / Javascript)

Question

Я занимаюсь одной научно-исследовательской работой и пытаюсь найти ответ на одну проблему. У меня есть 6 дел на странице, которая содержит различное содержание. Я хочу переместить эти шесть элементов div (на страницу в реальном времени), изменив только файлы jquery или CSS. Например: -

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

Я кодировал вышеприведенную вещь, которая отображает содержимое нижеуказанным образом (с помощью css - float):

1 2

3 4

5 6

Какой скрипт или CSS без изменения структуры HTML поможет мне отобразить содержимое в структуре ниже: -

6 5

3 4

2 1

Может ли кто-нибудь помочь мне с этим, пожалуйста.

Пожалуйста, дайте мне знать, если я должен предоставить какую-либо другую информацию от моего конца.

Answer 1

Вы могли бы сделать что-то вроде

[].reverse.apply($('div')).appendTo($('body'));

http://jsfiddle.net/EdgzC/1/

Answer 2

Вот быстрый и грязный способ, который сработал для меня. Я создал функцию, которая принимает массив, который задает новый порядок для тегов <div> и использует append для их изменения.

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

Рабочий пример: http://jsfiddle.net/FishBasketGordo/XK44w/