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

Question

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

этот вопрос уже есть ответ здесь:

Как я могу изменить порядок своих divs с помощью CSS?

23 ответов

Рассказ

допустим, мой 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 query, переключающий порядок блоков.

@media only screen and (max-device-width: 480px) {

   #blockC {

      /* magic order switching */

   }

}

472 11

html css

11 ответов:

Comments

Ничего не найдено.

thirtydot · Accepted Answer · 2011-09-15 14:52:53

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

посмотреть:http://jsfiddle.net/thirtydot/hLUHL/

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

CSS:
#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;
}
HTML:
<div id="blockContainer">
    <div id="blockA">Block A</div>
    <div id="blockB">Block B</div>
    <div id="blockC">Block C</div>
</div>

devnull · Accepted Answer · 2014-08-08 14:15:05

вот" простой как можно " пример, для изменения порядка 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/ (измените ширину окна, чтобы увидеть эффект изменения порядка divs)

Sertage · Accepted Answer · 2014-08-14 16:32:40

Я знал, что это старый, но я нашел более простое решение, и оно работает на 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"
Я нашел его здесь.

SW4 · Accepted Answer · 2014-12-02 10:36:33

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

используя гибкий график работы, flex-flow и ордер:

Пример1: Демо-Скрипка
    body{
        display:flex;
        flex-flow: column;
    }
    #blockA{
        order:4;
    }
    #blockB{
        order:3;
    }
    #blockC{
        order:2;
    }
альтернативно, обратный масштаб Y:

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

ValentinVoilean · Accepted Answer · 2015-06-04 17:02:24

этот метод работал для меня без элемента:

#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>

kspacja · Accepted Answer · 2013-01-20 21:17:37

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;
     }
}
Я думаю, что это не глупое решение, потому что повторение контента не является проблемой в большинстве случаев, и в вашем случае, если это реклама, вы бы повторили не так много контента.

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

fceruti · Accepted Answer · 2011-09-15 06:57:56

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

Will · Accepted Answer · 2011-09-15 06:59:05

вы можете возиться с полями:http://jsfiddle.net/zV2p4/

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

yoda · Accepted Answer · 2014-04-25 21:56:13

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

скрипка

dpp · Accepted Answer · 2011-09-15 07:56:18

возможно в CSS3: http://www.w3.org/TR/css3-writing-modes/#writing-mode

Почему бы не изменить порядок тегов? Ваша HTML-страница не сделана из камня, не так ли?

Control Fink · Accepted Answer · 2013-05-22 10:38:49

Как это по старинке...

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

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