Принудительно заставить второй div появляться под третьим div в html

Question

Я использую шаблон WordPress, в котором есть три основных деления

<div class="sidebar-right"></div>
<div class="sidebar-left"></div>
<div class="sidebar-middle"></div>

, используя float:right, он разделяет деления на три колонки. Однако в мобильной версии левая боковая панель исчезает. Я попытался отобразить его, но затем он появляется между правой боковой панелью и серединой, пока я хочу, чтобы он был ниже середины! Могу ли я достичь этой цели, изменив CSS? или я должен изменить их порядок в шаблоне?

Answer 1

Используя свойство CSS order, можно.

#container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.sidebar-right,
.sidebar-left,
.sidebar-middle {
  width: 100%;
}

.sidebar-right {
  order: 1;
}

.sidebar-left {
  order: 3;
}

.sidebar-middle {
  order: 2;
}

<div id="container">
  <div class="sidebar-right">One</div>
  <div class="sidebar-left">Two</div>
  <div class="sidebar-middle">Three</div>
</div>

Для больших дисплеев вы можете использовать медиа-запросы. Например, если ширина устройства превышает 1024, это означает, что вы можете установить flex-direction: unset;

#container {
  display: flex;
  flex-direction: column;
}

.sidebar-right,
.sidebar-left,
.sidebar-middle {
  width: 33.33%;
  float: left;
}

.sidebar-right {
  order: 1;
}

.sidebar-left {
  order: 3;
}

.sidebar-middle {
  order: 2;
}

@media screen and (min-width: 1024px) {
  #container {
    flex-direction: unset;
  }
}

<div id="container">
  <div class="sidebar-right">One</div>
  <div class="sidebar-left">Two</div>
  <div class="sidebar-middle">Three</div>
</div>