Как реализовать этот момент?

Question

[SerezhaWEB]

подскажите плес, как реализовать этот блок? В адаптиве фото должно быть снизу текста.
UPD: не заметил, что тут не понятно, что картинка выходит за контейнер.

Comments

[Andrew]

Что у вас вызвало сложности?
Отступ слева или что? фиксированная ширина для текстового блока?
Или вы сразу код хотите чтобы самому ничего не писать?

[DanKud]

Если сделать блоки фиксированной ширины, то достаточно просто сделать так:

.wrapper {
    display: flex;
    flex-flow: row wrap;
}

если блоки не фиксированной ширины, то через медиа-запросы, которые вам предложили в ответах.

Answer 1

[kshkld7ck]

.parent {
display:flex;
flex-direction:row;
}
@media (max-width:720px) {
.parent {
flex-direction:column;
}

или же

.parent {
display:flex;

}
@media (max-width:720px) {
.parent {
flex-wrap:wrap;
}
.left_block {
min-width:100%;
}

Comments

[Вадим Кот]

kshkld7ck
или же

@media (min-width: 720px) {
  .parent {
    display:flex;
  }
}

Зачем для мобильных устройств flex? Блоки на мобильных устройствах и так выстроятся друг под другом.