Является ли этот тип обработки мобильных / настольных макетов плохой практикой?

Question

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

Сейчас я делаю это так (пример):

    .hide-web {
      @media (min-width: ....px) {
      display: none;
     }
    }

    .hide-desktop {
      @media (min-width: ....px) {
      display: none;
     }
    }

HTML будет выглядеть примерно так:

<div class="hide-web>
 Displaying Element1 and Element2
 <element1>/element1>
 <element2>/element2>
</div>

<div class="hide-desktop>
 Displaying Element1 and Element2 but in different positions
 <element2>/element2>
 table or whatever here....
 <element1>/element1>
</div>

Это обычный способ сделать это или просто плохо?

Answer 1

---

Вы можете использовать свойство дисплея начальной загрузки

https://getbootstrap.com/docs/4.0/utilities/display/

Answer 2

Вы можете добиться того же поведения с помощью display: flex; и переключаться между flex-direction: column и flex-direction: column-reverse

Таким образом, у вас будет только одна HTML-структура, и изменения в направлении будут внесены вкласс css.

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