Каков наилучший способ перемещения элемента, который сверху вниз в "Ревизионный дизайн"

У меня есть следующий формат HTML: какой эффективный способ разместить данный элемент сверху на рабочем столе и внизу на мобильных устройствах (ширина < 640 пикселей)? Поскольку существует множество разных устройств, я не хочу писать координаты позиции, так как содержание высоты страницы меняется. Любые предложения?

<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>

Ответ 1

Переупорядочивающие элементы неизвестных высот реагирующим образом лучше всего выполнять с помощью Flexbox. Хотя поддержка для настольных браузеров не очень удобна (IE является основным ограничивающим фактором здесь, поддержка начинается с версии 10), большинство мобильных браузеров поддерживают ее.

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

http://caniuse.com/#feat=flexbox

Помните, что Flexbox может столкнуться с другими методами компоновки, такими как типичные методы сетки. Элементы Flex, настроенные на float, могут привести к неожиданным результатам в браузерах Webkit с использованием спецификации 2009 года (display: -webkit-box).

Ответ 2

Лучшая совместимость, чем flexbox, может быть достигнута с помощью display: table-footer-group (IE8 +)
Обратный эффект: для перемещения элемента выше, чем в HTML-коде, вы можете попробовать table-caption и table-header-group.

Не работает с самозаменяемыми элементами типа img или input, по крайней мере, на Chrome (и это вполне нормально), но отлично с div, например.

EDIT: это 2016, поэтому flexbox (и Autoprefixer) все вещи\o/

Ответ 3

Я не знаю, лучший ли это подход, но вы можете реплицировать тот же самый элемент, где хотите, и играть с атрибутом display: none/display: inline-block. Когда он просматривается на рабочем столе, ваш css говорит ему отображать тот, что сверху, а не тот, который находится внизу. Затем, при просмотре на мобильном телефоне, он не должен отображать один сверху и отображать тот, который находится внизу.

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

Ответ 4

Я предполагаю, что когда вы говорите "положение", вы имеете в виду, чтобы оно не двигалось при прокрутке. В этом случае вы можете использовать:

p.className {
  position: fixed;
  bottom: 0; // for mobile devices
  top: 0; // for desktops
}

Где элемент p получает атрибут класса следующим образом:

<p class="className">I am on the...</p>

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