Переключение порядка элементов блока с помощью CSS

Краткая история

Скажем, мой HTML уже установлен в камне:

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

Он будет выглядеть следующим образом:

------------
| Block A  |
------------
| Block B  |
------------
| Block C  |
------------

Теперь я хочу переключить порядок блоков. Как я могу сделать это только с CSS?

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

Я знаю там хакерские решения, такие как использование position:absolute, но это не сохраняет эффективного использования свойства display:block. То есть блоки блокируют другие блоки вниз, когда они растут в размере.

Длинная история

Когда пользователь использует компьютер для просмотра моей веб-страницы, блоки отображаются в следующем порядке:

  • Общая информация.
  • Расписание событий.
  • Реклама для iPhone.

Реклама iPhone-приложений размещена последней, потому что она не очень важна для пользователей компьютеров. Небольшой процент пользователей компьютеров будет выбивать свой телефон и устанавливать приложение.

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

  • Реклама для iPhone.
  • Общая информация.
  • Расписание событий.

Я хотел бы, чтобы пользователи iPhone и компьютеров использовали один и тот же HTML-код, но с помощью CSS-запроса переключился порядок блоков.

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

Ответы

Ответ 1

Как уже было предложено, Flexbox является ответом, особенно потому, что вам нужно только для поддержки одного современного браузера: Mobile Safari.

См: http://jsfiddle.net/thirtydot/hLUHL/

Вы можете удалить префиксные свойства -moz-, если хотите, я просто оставил их для будущих читателей.

    #blockContainer {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    #blockA {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    #blockB {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }
    <div id="blockContainer">
        <div id="blockA">Block A</div>
        <div id="blockB">Block B</div>
        <div id="blockC">Block C</div>
    </div>

Ответ 2

Вот пример "простой как можно", для изменения порядка div-элементов (при изменении размера окна браузера):

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

Пример: http://jsfiddle.net/devnull/qyroxexv/ (измените ширину окна, чтобы увидеть эффект изменения порядка div)

Ответ 3

Обновление: два облегченных решения CSS:

Использование flex, гибкий поток и :

Пример1: Демо-скрипт

    body{
        display:flex;
        flex-flow: column;
    }
    #blockA{
        order:4;
    }
    #blockB{
        order:3;
    }
    #blockC{
        order:2;
    }

В качестве альтернативы, измените масштаб Y:

Пример2: Демо-скрипт

body{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

Ответ 4

Я знаю, что это старо, но я нашел более легкое решение, и он работает на ie10, firefox и chrome:

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
</div>

Это css:

#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}

И результат:

"Three"
"Two"
"One"

Я нашел здесь.

Ответ 5

Этот метод работал у меня без flexbox:

#blockA,
#blockB,
#blockC {
    border: 1px solid black;
    padding: 20px;
}


.reverseOrder,
#blockA,
#blockB,
#blockC {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}
<div class="reverseOrder">
    <div id="blockA">Block A</div>
    <div id="blockB">Block B</div>
    <div id="blockC">Block C</div>
</div>

Ответ 6

HTML:

<div id="blockC second-order">Block C</div>
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC first-order">Block C</div>

CSS

.second-order {
     display: none;
}

@media only screen and (max-device-width: 480px) {
     .first-order: {
         display: none;
     }

     .second-order: {
         display: block;
     }
}

Я думаю, что это не-глупое решение, потому что повторение контента не является проблемой в большинстве случаев, и в вашем случае, если это реклама, вы повторяете не много контента.

У меня есть ответы на этот вопрос, хотя прошло один год, потому что я искал решение, я прочитал это и получил эту идею.

Ответ 7

<div id="container">
    <div id="a">Block A</div>
    <div id="b">Block B</div>
    <div id="c">Block C</div>
</div>

позволяет сказать, что высота блока равна 100px

#container     {position:relative; height: 300px;}
#a, #b, #c     {position:absolute; height: 100px}
#c             {top: 0px;}
#b             {top: 100px;}
#a             {top: 200px;}

Ответ 8

Вы можете столкнуться с полями: http://jsfiddle.net/zV2p4/

Но вам, вероятно, будет лучше использовать position: absolute. Это не меняет display: block, но это сделает ширину авто. Чтобы исправить это, сделайте divs width: 100%

Ответ 9

Мне удалось сделать это с помощью CSS display: table-*. Я не тестировал более трех блоков.

fiddle

Ответ 11

Представляет это для низкотехнологичных...

поместите объявление вверху и внизу и используйте медиа-запросы для отображения: none, если это необходимо.

Если объявление не было слишком большим, оно не добавило бы слишком большого размера к загрузке, вы даже могли бы настроить, где объявление отправило вас на iPhone/ПК.