Порядок переключения элементов HTML при изменении макета в режиме "Ревизионный веб-дизайн"

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

Мне нужны элементы HTML в другом порядке для настольных компьютеров и мобильных устройств.

Мобильный

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

Заказ для рабочего стола

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

Это упрощенная версия того, что я хочу выполнить. Я думаю, что он называется прогрессивным улучшением. Как эксперты по веб-дизайну перемещают элементы html? С JavaScript? Было бы нормально? Есть ли какие-либо плагины jQuery?

Ответы

Ответ 1

Просто используйте jQuery для изменения DOM вокруг по мере необходимости

if (mobile == true) {

    $('div.three').insertBefore($('div.two'));
}

Ответ 2

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

Если не ваш последний откат может состоять в создании 4 div.

<div>one</div>
<div>three(mobile)</div>
<div>two</div>
<div>three(desktop)</div>

Затем используйте медиа-запросы, чтобы скрыть соответствующий "три" div в зависимости от устройства.

Ответ 3

Воскрешая этот вопрос, потому что я наткнулся на него через google, и существующие ответы устарели. Решение, в результате которого я использовал только один с downvote, поэтому я расскажу об этом.

Использование display:flex позволит вам переупорядочить элементы с помощью свойств column/column-reverse:

.container{ display:flex;flex-direction:column }
@media screen and (min-width:600px) {
  .container{ flex-direction:column-reverse }
}

См. JSFiddle здесь и некоторые таблицы поддержки здесь.

Также проверьте несколько постпроцессоров CSS здесь и здесь

Ответ 4

Вы можете сделать это с помощью jquery, что вам нужно сделать, это проверить устройство и вставить его в соответствии с ним

также полезно читать отзывчивый веб-дизайн, где вы узнаете такие вещи, как проверка этого qustion Отзывчивые советы по веб-дизайну, рекомендации и методы динамического масштабирования изображений

Я нашел здесь полезные советы, а также проверить это

Ответ 5

Следующий код будет складывать div в мобильном телефоне и на рабочем столе, это будет размещение в 2 столбцах

<div class="main">

</div>
<div class="aside">
</div>

<style type="text/css">
   @media only screen and (min-width: 768px) {
      .main {float:right;width:60%}
      .aside {float:left;width:40%}
   }
</style>