Как сверстать такой блок для широкого экрана и в адаптиве, даны две картинки?

Question

Даны изображения на широком экране и в адаптиве. Не могу понять как это верстается.

Answer 1

 @media screen and (min-width:700px) {
            .text3, .text2{
                display: none;
            }
            .main{
                display: flex;
            }
            .text{
                width: 60%;
            }
            .img{
            width: 30%;
            height: 200px;
        }
        }
        @media screen and (max-width:699px) {
            .text3, .text2{
                display: block;
            }
            .text{
                display: none;
            }
            .img{
            width: 60%;
            height: 200px;
        }
        }

  <div class="main">
        <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, ea iste pariatur, ut blanditiis reprehenderit sunt dolores odit, placeat labore non. Sapiente mollitia cumque, quisquam nobis ab dolores. Nisi, reprehenderit?</p>
        <p class="text2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt, ea iste pariatur</p>
        <img src='https://static.wikia.nocookie.net/pogod/images/3/3a/%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0.jpg/revision/latest?cb=20181224151953&path-prefix=ru' class="img">
        <p class="text3">ut blanditiis reprehenderit sunt dolores odit, placeat labore non. Sapiente mollitia cumque, quisquam nobis ab dolores. Nisi, reprehenderit?</p>
    </div>

Чтобы заменить текст при смене ширины экрана используйте медиа запросы и в скобках указывайте нужное вам условие, у меня это от 700px и до 699px. Чтобы элементы были друг за другом помещайте их в один блок с display: flex; . В данном примере я заменяю текст при смене ширины экрана.

Answer 2

Жаль видеть ответы, в которых вообще нет никакой логики..

Разберёмся.
В десктопной версии изображение находится "снаружи" текста, а в мобильной "внутри", и разрывать текст абзацами, а особенно заголовками - вообще не нужно. Страдает семантика и СЕОшники потом придут с вопросами.

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

body {background-color: #f2f2f2;}

.banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  background-color: #fff;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  color: #333;
}

@media screen and (max-width: 768px) {
  .banner {
    max-width: 300px;
  }
  
  .banner .texts {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }
}

.banner .orange {
  font-weight: 600;
  color: #f54a2e;
}

.banner .mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .banner .mobile {
    display: initial;
    width: 100%;
  }
}

.banner .desktop {
  width: 200px;
}

@media screen and (max-width: 768px) {
  .banner .desktop {
    display: none;
  }
}

<div class="banner">
  <p class="texts">
    <span>ЧТОБЫ ПОДДЕРЖАТЬ МЕЖДУНАРОДНЫЙ ВАСЮКИНСКИЙ ТУРНИР</span>
    <img class="mobile" src="https://i.imgur.com/elDirm9.png" alt="image desktop" />
    <span>ПОСЕТИТЕ ЛЕКЦИЮ НА ТЕМУ:<span class="orange">«ПЛОДОТВОРНАЯ ДЕБЮТНАЯ ИДЕЯ»</span></span>
  </p>
  <img class="desktop" src="https://i.imgur.com/elDirm9.png" alt="image mobile" />
</div>

БЛОГ НА HUSL

Как сверстать такой блок для широкого экрана и в адаптиве, даны две картинки?

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