Как сверстать двухколоночный макет таким образом?

Question

[Aison]

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

Есть главная страница такого вида

главная

при переходе в полную новость мы оказываемся на странице с этой новостью, где постер располагается в правой колонке. Сама же правая колонка доступна на главной, но постера конечно же там нет, он слева рядом с описанием новости.

полная новость на десктопе

Вопрос: Каким образом сверстать такой макет, чтобы получилось так? (забыл показать на картинке. постер должен быть под заголовком полной новости (см 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>
					
	..........

p.s. могу скинуть ссылку на сайт в телегу или по почте..

Comments

[Сергей delphinpro]

1. Дублирование в разметке заголовка
2. Дублирование в разметке постера
3. Копирование постера джаваскриптом в нужное место
4. Использование grid-раскладки

Выбирайте любой вариант.

Ну и еще очевидный и самый простой, если по дизайну получится:

<h1>title</h1>
<container>
  <main></main>
  <aside></aside>
</container>

[Aison]

Сергей delphinpro, заголовок не причём. нужно постер кинуть в левый блок из правого на моб. устройствах.
вариант дублировать мне известен)
а вот js использовать.. даже не знаю, ощущение ненадёжности будет напоминать о себе каждый раз, когда я буду заходить в полную новость. вот grid интересен, можно пожалуйста пример как это могло бы быть?

если не сложно, прочтите мой второй ответ другому участнику вопроса

[Сергей delphinpro]

Aison, Под простым вариантом я имел ввиду это https://jsfiddle.net/4jymaztv/

на гридах примерно так же. разметить сетку, менять расположение блоков в ней по медиазапросам.

[Aison]

Сергей delphinpro, ох, сложно, но будем пробовать) спасибо. забыл, нужно, чтобы тайтл был на том же уровне что и постер, в примере он отдельно

[Aison]

Антон Литвиненко, это rightside - предназначен для этого) в ul списки обычно не пихают div'ы, однако иногда того требует решение и не вижу проблем с этим (конечно если правильно реализовать, но даже если таковы будут их можно поправить). я же тут про реализацию говорю. назовите это хоть сайдпуром...

Answer 1

[Павел]

Нужно обернуть пост и правый блок в один див, дать ему флекса, и уже там играть ордером

.rightside {
order: -1
}

Не меняя верстки - только вырезать и вставить правый блок при помощи js...

И еще можно держать второй такой блок - на мобильной показываем его, на десктоп скрываем....

Comments

[Aison]

спасибо, но уже использую order. даже так постер выходит разместить только над заголовком. хоть блок с постером идёт первым, а не вторым. js вариант на крайний случай.

в cms ещё есть возможность использовать теги шаблонизатора, которые работают только на десктопе, смартфонах, планшетах. если использовать их, то о динамической подстройке можно и забыть, только когда обновляется страница и там уже бэкэнд определит чем является устройство.

Answer 2

[sergski]

на сколько я понял таск как-то так ?

Comments

[Aison]

я скинул линк на сайт, чтобы Вы посмотрели как сейчас. временно. не хотелось бы светить сайтом)

там, если уменьшить разрешение будет видно суть проблемы...

[sergski]

Aison, те на мобилке вы хотите такой порядок:
постер
контент
навигация
комментанрии
?

[Aison]

sergski, в идеале вот такой

вся суть проблемы в том, что обычно правая колонка - это левая колонка. тогда, блок с постером идёт сразу сверху, но это не решает проблемы - как засунуть его под тайтл новости?)

[sergski]

Aison, в данном случае это можно сделать только хаком: разместить 2 постера. Первый между заголовком и текстом, второй в правой колонке и и делать им перекрестный показать/скрыть стилями в медиа-квери

[Aison]

sergski, вроде на stackoverflow сказали через grid можно...

[sergski]

Aison, можно, если сделать совсем другую разметку

[Aison]

sergski, сделать, но оставить вид, который есть сейчас ?)

[sergski]

Aison, сверстать можно что угодно, если правильно все элементы спроектировать.

[Aison]

sergski, а что если использовать абсолютное позиционирование? изначально постер разместить в теле новости под тайтлом, а на десктопе придавать постеру position: absolute;

[sergski]

Спозиционировать можно, но при изменении ширины блоки будут перестраиваться и менять свою геометрию.. уж лучше сделайте с хаком)