Как я могу изменить порядок 2 div, используя только CSS?

Question

Мне интересно, как я могу изменить порядок этих 2-х div для мобильных пользователей, используя только css (или js) (PHP не вариант, потому что я использую полное кэширование страниц).и это должно происходить только для переменных продуктов (я думаю, что у нижнего div есть другое имя класса для вариационного продукта, поэтому я думаю, что это не должно быть проблемой)

Это страница: https://bonmedico.net/products/bandages-orthoses/stato/

А это скриншот, показывающий 2 деления, которые мне нужно поменять местами: https://ibb.co/mMdYw9

Answer 1

С помощью flexbox вы можете изменить порядок делений внутри div-оболочки.
Используя запросы @media, вы можете сделать это в зависимости от размера экрана.
Я сделал простой пример кода.Вы должны быть в состоянии адаптировать его.

.wrapper {
  display: flex;
  flex-direction: column;
}

/* For Mobile - change the max-width to whatever you want */

@media screen and (max-width: 540px) {
  .wrapper>#firstDiv {
    order: 2;
  }
  .wrapper>#secondDiv {
    order: 1;
  }
}

/* For other and change the min-width here as well.  */

@media screen and (min-width: 540px) {
  .wrapper>#firstDiv {
    order: 1;
  }
  .wrapper>#secondDiv {
    order: 2;
  }
}

<div class="wrapper">

  <div id="firstDiv">
    This is usually first
  </div>

  <div id="secondDiv">
    This is usually second
  </div>
</div>