Переместить класс в другой класс на мобильном телефоне - PullRequest
Новая
       7

Переместить класс в другой класс на мобильном телефоне

0 голосов
/ 16 февраля 2019

У меня следующая структура: 

<div class="container">
   <div class="text1">...</div>
</div>

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

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

<div class="container">
   <div class="text2">...</div> (should be on top place)
   <div class="text1">...</div>
</div>

<div class="aside"> (this class can be hidden)

</div>

Я не предпочитаю вариант с отображением: нет/ блок.Есть ли способ сделать это с помощью JavaScript?

Спасибо!

1 Ответ

0 голосов
/ 16 февраля 2019

Это был бы простой подход в jQuery, но, как уже упоминалось @messerbill, я бы порекомендовал вам использовать адаптивные CSS-фреймворки, такие как Bootstrap или Bulma. 

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $(".text2").prependTo(".container");
}

CodePen : https://codepen.io/dmnktoe/pen/GzwQaR

...