Поменять местами блоки <div> с помощью CSS

[pashkje]

Извините, если создавали уже такие темы, но не нашел их здесь. Собственно есть два блока див. Допустим <div>первый блок</div> <div>второй блок</div>.

Как с помощью CSS можно поменять местами, чтобы первый второй блок был ВЫШЕ первого. Передвижение в пиксилях с помощью позиционирования сразу говорю не подходит, ибо контент блоков будет за частью меняться.

[wwt]

1. Поменять их местами в html религия не позволяет?

2. Если высота статична и известна - http://jsfiddle.net/FXgCf/

3. Если высота не статична и не известна то с помощью javascript - http://jsfiddle.net/kQyvc/ ну или так http://jsfiddle.net/KnsYY/

Edited October 26, 2012 by wwt

[pashkje]

1.html - можно сказать религия не позволяет

2.Высота увы, но динамична.

3. JS еще не учил

[pashkje]

а не могли бы написать точно такую же функцию, но только для 3ёх блоков?

<div>1</div>

<div>2</div>

<div>3</div>

Надо чтобы 2 было вместо 1,и чтобы при измене блоков, 1ый блок не нализал на 3ий.

[wwt]

а не могли бы написать точно такую же функцию, но только для 3ёх блоков?

<div>1</div>

<div>2</div>

<div>3</div>

Надо чтобы 2 было вместо 1,и чтобы при измене блоков, 1ый блок не нализал на 3ий.

В таком варианте http://jsfiddle.net/KnsYY/1/ неважно сколько блоков идет до или после передвигаемых, мы их меняем местами в дереве DOM.

Тоесть по сути это тоже самое что вы ручками исправите html код на вот это:

<div>2</div>
<div>1</div>
<div>3</div>

Edited October 26, 2012 by wwt

[pashkje]

спасибо!

[hedgehog]

А извращенцы могут сделать это средствами CSS: http://jsfiddle.net/dkdSu/

[wwt]

А извращенцы могут сделать это средствами CSS: http://jsfiddle.net/dkdSu/

ну можно и так если забить на ie6-7.

Ну и мне не очень нравится клепать псевдотаблицы ))) Хотя решение очень даже не плохое.

Edited October 26, 2012 by wwt

[volshebnyi]

 

а не могли бы написать точно такую же функцию, но только для 3ёх блоков?

<div>1</div>

<div>2</div>

<div>3</div>

Надо чтобы 2 было вместо 1,и чтобы при измене блоков, 1ый блок не нализал на 3ий.

В таком варианте http://jsfiddle.net/KnsYY/1/ неважно сколько блоков идет до или после передвигаемых, мы их меняем местами в дереве DOM.

Тоесть по сути это тоже самое что вы ручками исправите html код на вот это:

<div>2</div><div>1</div><div>3</div>

 

Подскажите, пожалуйста, как сделать что бы данная функция выполнялась только для медиазапроса:

@media(max-width: 480px)

 

Заранее благодарю за ответ!

[antonKar]

Подскажите, пожалуйста, как сделать что бы данная функция выполнялась только для медиазапроса: @media(max-width: 480px)

 

Одиннадцатью минутами ранее нашёл способ (я в флексах просто не бум-бум) через CSS http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css

Edited April 15, 2015 by antonKar

[volshebnyi]

 

Подскажите, пожалуйста, как сделать что бы данная функция выполнялась только для медиазапроса: @media(max-width: 480px)

 

Одиннадцатью минутами ранее нашёл способ (я в флексах просто не бум-бум) через CSS http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css

 

 

У меня иная ситуация))) Есть два блока - <main> и <aside>Я не могу эти блоки обернуть в еще один контейнер (издержки верстки под мою CMS). Вариант с функцией мне бы подошел.

[antonKar]

Тогда через js:

 

1) Объявляем переменную, в которой храним true или false (перевёрнуто или неперевёрнуто);

2) При генерации страницы и при ресайзе смотрим на переменную и на ширину страницы, и делаем (или не делаем) наши дела.

[ivvvolga]

1. Поменять их местами в html религия не позволяет?

2. Если высота статична и известна - http://jsfiddle.net/FXgCf/

3. Если высота не статична и не известна то с помощью javascript - http://jsfiddle.net/kQyvc/ну или так http://jsfiddle.net/KnsYY/

 

Подскажите, пожалуйста, если есть задача перемены очередности вывода блоков на странице при перезагрузке этой страницы, можно придумать похожий несложный скрипт?

[andrey7287]

https://jsfiddle.net/8621zb6w/