Каким образом объединить один из блоков второй колонки с первой колонкой?

Question

[malayamarisha]

Всем привет.
Есть блок превью заказа, который разбит на 2 колонки:
1ая колонка - номер заказа, сумма
2ая колонка - информация о заказе (статус, ТК, текст, кнопки)
Во второй колонке есть блок order__description с текстом.

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

В верстке данный блок не желательно перемещать, тк для декстоп данный блок должен выводиться между "Статус заказа" и "Транспортная компания"

Подскажите, пожалуйста, каким образом возможно реализовать?

Answer 1

[Михаил Р.]

Исходя из тега CSS GRID, и достаточно "не точного тз", ответ будет примерно такой (если я не правильно понял тз, то пример работы колонки "Описание заказа" - подскажет, как работать с другими колонками и рядами):


HTML:

<div class="order">
  <div class="order__item order__item-number">Номер заказа</div>
  <div class="order__item order__item-sum">Сумма</div>
  <div class="order__item order__item-status">Статус заказа</div>
  <div class="order__item order__item-transport">Транспортная компания</div>
  <div class="order__item order__item-description">Описание заказа</div>
  <div class="order__item order__item-buttons">Кнопки</div>
</div>

CSS:

/* desktop */

.order {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns */
}

.order__item {
  border: 1px solid black;
  padding: 10px;
}

/* first column */
.order__item-number,
.order__item-sum {
  grid-column: 1;
  background-color: #f2f2f2;
}

/* two column */
.order__item-status,
.order__item-transport,
.order__item-description,
.order__item-buttons {
  grid-column: 2;
  background-color: #e6e6e6;
}

/* modile */

@media (max-width: 768px) {
  .order__item-description {
    grid-column: 1 / span 2; /* span two columns */
    background-color: #d4d4d4;
  }
}

Comments

[malayamarisha]

ответ будет примерно такой

- ответ прям в точку
Спасибо огромное )