div в разных родителях в зависимости от ширины экрана/окна
Нужно изменять положение блока div на странице в зависимости от ширины экрана/окна следующим образом:
на малых экранах (или в окнах, не развернутых на ширину, допустим, более 1024px) div размещаем/отображаем в родительском блоке article;
на больших экранах тот же div помещаем в блок aside.
Хотелось бы именно один div использовать в разных положениях, а не два, для одного из которых указывать display:none на определенных @media
Возможно ли это реализовать на jQuery? Спасибо.
Ответы (1 шт):
Автор решения: Max Grt
→ Ссылка
В вашем случае блок нужно поместить в 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.