Надо сверстать как на макете не дублируя блок?

Question

[Миржалол Мирхомитов]

Есть задача сверстать макет.
Для десктопа он отображается так

а для планшета по другому

если обратит внимания форма изначально было под текстом с правой стороны а в планшете отдельно внизу.
Надо сверстать не дублирую форму

Comments

[Вадим]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
Но судя по тэгу вопроса Вы это уже знаете. В чём тогда вопрос? Надо - сделайте.
Не получится - приходите, разберёмся.

[Миржалол Мирхомитов]

Вадим, Честно говоря я уже год не верстал. Проста не получается. Если знаете как можете пжл отправить код

[Вадим]

Миржалол Мирхомитов, Не сочтите за грубость, но Вы ошиблись сервисом.
Для таких запросов Вам сюда: https://freelance.habr.com/
Тут подобные запросы запрещены правилами.
Этот сервис предназначен для помощи с ошибками. То есть с уже сделанной на, условно, 90% работой.
Если вопрос не будет удалён модератором, то будете сидеть в режиме хатико и ждать, вдруг у кого-то есть подобная заготовка или кому-то будет нечего делать или кто-то на энтузиазме сделает.

[Миржалол Мирхомитов]

Вадим, Да согласен с вами.
Проста у меня это не получилось из-за этого пишу сюда может кто та поможет
С помощью грида у меня получилось как на планшете(вторая картинка)
а для десктопа(первая картинка) не получается

вот так становится.

[Вадим]

Миржалол Мирхомитов, Ну это уже не плохо. Сделайте демку на codepen, в которой будет результат вашей работы, можно конечно же упрощённо, главное чтобы структуру повторяло и прикрепите к вопросу, это увеличивает скорость и количество ответов в разы, потому что это значительно удобнее, чем смотреть по скринам что и как.

[Алан Гибизов]

Надо сверстать как на макете не дублируя блок?

Не надо.

[Миржалол Мирхомитов]

Вадим, Нашел решения
Для картинка десктопа(первая картинка)
Вес блок берем в одну обертку и даем следующие стили

display: grid;
      grid-template-columns: 320px auto;
      grid-auto-rows: auto;
      grid-column-gap: 80px;
      grid-template-areas:
        "main__left main__right"
        "main__left form";

Для левой колонки
grid-area: main__left;
А правую колонку я разделил на две. Тексты отдельно и форма отделно
Для текстов
grid-area: main__right;
Для формы
grid-area: form;

Answer 1

[Алан Гибизов]

Надо сверстать как на макете не дублируя блок?

Надо.

Answer 2

[Taulan Khatuaev]

Для того чтобы сверстать шаблон не дублируя формы. Можно использовать в css медиа-запросы.

/* Скрыть форму на десктопе */
@media only screen and (min-width: 768px) {
  .form {
    display: none;
  }
}

/* Показать форму на планшете */
@media only screen and (max-width: 767px) {
  .form {
    display: block;
  }
}