Как перенести блок в другую колонку при адаптиве?

Question

[Максим]

Всем привет, я еще совсем новечок в Верстке, и не могу реализовать один момент в макете.
Есть макет, в котором при адаптиве заголовок занимающий всю строку, переносится в правый блок, а контент снизу подтягивается к верху (как на фото). Подскажите как это можно реализовать, у меня пока не выходит.

ПК верстка


Адаптив


За ранее спасибо.

Answer 1

[FrelFrloich]

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

.title {
width: 300px
}

а надо:

.title {
width: 100%;
max-width: 300px;
}

таким образом вы укажите заголовку, растягиваться на 100 процентов, но максимально на 300px и когда ваша колонка будет уже 300px он не будет занимать твёрдую позицию в 300px а будет в 100% от этой колонки. В следующий раз заливайте пример своего кода сюда или аналог https://codepen.io/

Answer 2

[Одиночка Айс]

Либо скрывать/показывать блоки с дублирующимся контентом, либо слать "дизайнера" в пешее эротическое, это вам не газета.

Comments

[Максим]

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

[Pavel-ww]

Максим, максимально правильно всё таки слать дизайнера. А скрывать / показывать - это костыль. Критерий правильности тут такой - чем меньше дублей блоков скрываешь / показываешь, тем лучше

[Максим]

Pavel-ww, наверно не правильно написал, но имел ввиду, что не хочу использовать дубль, а сразу правильно реализовать, так как нарисовал дизайнер. Макет то все равно верстаю для себя, а не на заказ)

Answer 3

[ForSureN1]

Как вариант изначально поместить его в правую колонку, и дать position absolute, дать ему left: -50%, и уже когда нужно будет, просто задаете ему position static и он вернется в свою колонку

Comments

[Максим]

Спасибо, попробую так реализовать.

Answer 4

[Максим]

FrelFrloich, я не могу понять как вообще сделать так, что бы заголовок изначально занимал 2 колонки, а когда ширина экрана 720px и меньше, что бы он становился в правую колонку.

вот более подробный скрины макета
min-width 720px


max-width 720px

Comments

[Алексей Дубровин]

Эм. Использовать gird?

[Максим]

Алексей Дубровин, не думал даже, Flex использую, почитаю более подробно о Grid...