Как сверстать двухколоночный макет таким образом?
Приложу примеры в картинках для наглядности.
Есть главная страница такого вида:
При переходе в полную новость мы оказываемся на странице с этой новостью, где постер располагается в правой колонке. Сама же правая колонка доступна на главной, но постера конечно же там нет, он слева рядом с описанием новости.
Вопрос: Каким образом сверстать такой макет, чтобы получилось так? (забыл показать на картинке. постер должен быть под заголовком полной новости (см HTML код ниже под спойлером, там показан заголовок).
Проблема в том, что я не могу разместить постер под title новости в мобильной версии потому, что постер находится в другом блоке.. проблему наглядно можно увидеть в html коде (см. ниже)
<div class="content flex">
<div class="midside">
<div id="dle-content">
<div class="block-item">
<div class="post">
<div class="post-head">
<div class="flex flex-center">
<div class="post-category">
<a class="category-link" href="/">Фильмы</a>
</div>
<h1 class="post-title">
<div class="title">Люди Икс</div>
<div class="alt-title">X-Men, 2000 12+</div>
</h1>
</div>
</div>
<div class="post-container">
<div class="post-box">
<div class="post-text">Они — дети атомного века, сверхлюди, новое звено в цепи эволюции. Каждый из них был рождён в результате уникальной генетической мутации, наделившей их с детства необыкновенными способностями. Под руководством профессора Чарльза Ксавьера,
телепата с мировым именем, одарённые ученики научились контролировать и управлять своими удивительными способностями в интересах человечества. Но не все мутанты разделяют взгляды профессора: могущественный мутант Магнето, которому подвластны
все металлы, собрал команду единомышленников. Он не верит, что люди и мутанты когда-либо смогут мирно сосуществовать. Они разработали план, чтобы осуществить захват власти над миром, и тогда, только ученики профессора Ксавьера смогут защитить
этот мир…</div>
<div class="post-menu">
<div class="post-author">
<div class="avatar">
<span class="cover" style="background-image: url(uploads/fotos/foto_2.png);"></span>
</div>
<a href="/" class="login-name">Aqua</a>
</div>
<a class="post-edit boobls-anim" onclick="return dropdownmenu(this, event, MenuNewsBuild('67', 'full'), '170px')" href="#">
<svg class="icn icn-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.667 12c0-0.736-0.3-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.3-1.885 0.781-0.781 1.149-0.781 1.885 0.3 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.3 1.885-0.781 0.781-1.149 0.781-1.885zM24 12c0-0.736-0.3-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.3-1.885 0.781-0.781 1.149-0.781 1.885 0.3 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.3 1.885-0.781 0.781-1.149 0.781-1.885zM5.333 12c0-0.736-0.3-1.404-0.781-1.885s-1.149-0.781-1.885-0.781-1.404 0.3-1.885 0.781-0.781 1.149-0.781 1.885 0.3 1.404 0.781 1.885 1.149 0.781 1.885 0.781 1.404-0.3 1.885-0.781 0.781-1.149 0.781-1.885z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rightside">
<div class="block-item gffg">
<div class="block full-play">
<div class="block-container">
<div class="flex flex-center flex-center-center">
<!-- ПОСТЕР -->
<img class="poster lazy-loaded" data-src="/uploads/.jpg" src="/uploads/posts/2020-10/.jpg" alt="">
</div>
</div>
<div class="form-buttons flex flex-center-center">
<a class="btn btn-purple" href="/">
<span class="btn-title">Смотреть онлайн</span>
</a>
</div>
</div>
</div>
<div class="block-item">
<div class="block">
<div class="block-head">
<div class="title">Навигация</div>
</div>
</div>
</div>
</div>
</div>