Вопрос по верстке картинки - адаптив

Question

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

Я сделал 2 <div> (левый с описанием, куда вошла и стрелка) и правый с картинкой. И флексами их разместил как в макете. Теперь на экране 320px - стрелка должна идти после картинки.

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

Answer 1

Элемент стрелки в этом случае лучше всего вынести в общий контейнер, и задать элементу свойство position; со значением absolute;. С помощью медиа-запросов для мобильных устройств это значение менять на relative. Это же касается и других элементов страницы. Вот пример такой верстки:

body {margin: 0; padding: 0; height: 200vh;}

.container {
  display: flex; align-items: center; align-content: center; position: relative;
}

.item__l,
.item__r {
  flex: 0 1 100%; align-self: flex-start;
  margin: 0; padding: 10px; border: 2px solid chocolate;
}
.item__l {padding-bottom: 70px;}

.item__l>span,
.item__r>span {
  display: block; width: 100%; height: 70vh; border: 2px solid gray;
}
.item__l>span {height: calc(70vh - 60px);}

.arrow {
  position: absolute; left: 20px; bottom: 20px; width: 40px; height: 40px;
  border: 2px solid brown; border-radius: 40px;
}

@media screen and (max-width: 800px) {
  .container {
    flex-flow: column nowrap;
  }
  .item__l,
  .item__r {
    flex: 3 3 100%; align-self: stretch; padding-bottom: 10px;
  }
  .arrow {
    position: relative; left: 0; bottom: 0; margin: 20px 0;
  }

<div class="container">
  <div class="item__l"><span>текст</span></div>
  <div class="item__r"><span>картинка</span></div>
  <div class="arrow"></div>
</div>

БЛОГ НА HUSL

Вопрос по верстке картинки - адаптив

Ответы (1 шт):