Поместите элемент над другим для маленького экрана - PullRequest
Новая
       1

Поместите элемент над другим для маленького экрана

0 голосов
/ 04 марта 2019

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

То, что я пробовал, не сработало. 

@media(max-width: 820px) {
  .head {
    display: -webkit-box;
  }

  .text > .sidebar {
    -ms-flex-order: 1;
  }
<div class='container'>
      <div class='head'>
      <aside class='sidebar'>
      </aside>
     </div>

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

используя flex, вы можете изменить flex-direction на column, а затем изменить order элементов flex по мере необходимости.

Вы также можете использовать grid в сочетании с grid-template-areas, чтобы установить и изменить порядок ячеек сетки по своему усмотрению.например, в сочетании с @media

...
grid-template-areas:
  "content"
  "header";
...

@media (max-width: 500px) {
  ...
  grid-template-areas:
    "header"
    "content";
  ...
}
0 голосов
/ 04 марта 2019

У вас есть ряд проблем:

  • Ошибочный тег <body> (просто удалите это).
  • Селектор (.text > .sidebar), который никогда не будет соответствовать целиэлемент.На самом деле вам не нужно любое моделирование на .sidebar, поэтому я также просто удалил это.
  • Логическая ошибка - .head не содержит order;Я предполагаю, что вы хотите это ниже .sidebar в мобильном представлении, то есть .head, что потребует order: 2 (не .sidebar).

После того, как все это исправлено, вам нужно просто указать .container display: flex и flex-direction: column, и своп будет работать как положено.

Это можно увидеть в следующем (упрощенно) пример: 

@media(max-width: 820px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .head {
    order: 2;
  }
}
<div class='container'>
  <div class='head'>
    <div class="text">
      TeXt
    </div>
  </div>
  <aside class='sidebar'>
    wordS
  </aside>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...