div в разных родителях в зависимости от ширины экрана/окна

175

19 апреля 2022, 00:20

Нужно изменять положение блока div на странице в зависимости от ширины экрана/окна следующим образом:

на малых экранах (или в окнах, не развернутых на ширину, допустим, более 1024px) div размещаем/отображаем в родительском блоке article;
на больших экранах тот же div помещаем в блок aside.

Хотелось бы именно один div использовать в разных положениях, а не два, для одного из которых указывать display:none на определенных @media

Возможно ли это реализовать на jQuery? Спасибо.

Answer 1

В вашем случае блок нужно поместить в aside, а в зависимости от размера экрана размещать его в разных местах. Это можно реализовать на css.

    <header><h1>Адаптивная верстка</h1></header>
    <div class="container">
      <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</article>
      <aside><div>Div в aside</div></aside>
    </div>
    <style>
      .container {
        display: flex;
      }
      @media all and (max-width: 480px) {
        .container {
          display: block;
        }
      }
    </style>

В данном случае если максимальная ширина 480px, то div разместится под article.