Блог

Главная - Вопросы по программированию - Поместить элемент над другим для маленького экрана

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

#css

#css

Вопрос:

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

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

 @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>

Комментарии:

1. Не могли бы вы подробнее рассказать о том, что вы пытаетесь сделать?

2. @user11145458 Прошу прощения, если вам кажется, что я вас каким-то образом спровоцировал, но я не снижал голос по вашему вопросу и не нарушал никаких правил SO, прося вас уточнить. Я рад, что вы нашли ответ, который искали, хотя я настоятельно рекомендую вам еще раз взглянуть на временные метки для каждого из ответов, оба из которых предшествуют моему комментарию.

Ответ №1:

используя 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";
  ...
}

Ответ №2:

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

  • Ошибочный <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>