Не могу понять как построить блок HTML, CSS

Question

Подскажите пожалуйста как построить структуру HTML и CSS, чтобы картинка была на десктопе слева, а на телефоне между описанием и кнопкой правого блока

Вот наглядная иллюстрация:

Вот пример другого блока, где непонятным для меня образом текст "Contact Us" перемещается в другой блок

Answer 1

Можно в верстке изначально добавить ту картинку под телефон,где бы ты хотел,и сделать ей display:none,и при изменении ширины экрана,картинке десткопной версии делать display:none а картинке под телефон display:block.

Answer 2

Пример 1

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.section {
  padding: 3rem 2rem;
  background-color: #232342;
  color: #fff;
}

.section__container {
  max-width: 60rem;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section__pict {
  max-width: 100%;
}

@media (min-width: 768px) {
  .section__title,
  .section__lead {
    max-width: 50%;
  }
  .section__pict {
    max-width: 50%;
    max-height: 80%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

<section class="section">
  <div class="section__container">
    <h1 class="section__title">Title</h1>
    <p class="section__lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatum architecto cupiditate, delectus pariatur molestiae nesciunt suscipit, odit nulla aspernatur assumenda labore, excepturi placeat quaerat voluptate, harum quis blanditiis
      explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatum architecto cupiditate, delectus pariatur molestiae nesciunt suscipit, odit nulla aspernatur assumenda labore, excepturi placeat quaerat voluptate, harum quis
      blanditiis explicabo.</p>
    <img class="section__pict" src="https://payload.cargocollective.com/1/8/270313/14198122/header_R3-01_2000_c.png" alt="">
    <button class="section__btn">Button</button>
  </div>
</section>

Пример 2

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.section {
  padding: 3rem 2rem;
  background-color: #232342;
  color: #fff;
}

.section__container {
  max-width: 60rem;
  margin: 0 auto;
}

.section__pict {
  max-width: 100%;
  height: auto;
}

.section--reverse {
  background-color: #ccc;
  color: #000;
}

@media (min-width: 768px) {
  .section__container {
    display: grid;
    grid-auto-rows: auto;
    align-items: center;
    grid-gap: 1rem;
  }
  .section__column:nth-of-type(1) {
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .section__column:nth-of-type(2) {
    grid-row: 2/3;
    grid-column: 1/2;
  }
  .section__column:nth-of-type(3) {
    grid-row: 1/4;
    grid-column: 2/3;
  }
  .section__column:nth-of-type(4) {
    grid-row: 3/4;
    grid-column: 1/2;
  }
  .section--reverse .section__container {
    direction: rtl;
  }
  .section--reverse .section__column:nth-of-type(1),
  .section--reverse .section__column:nth-of-type(2),
  .section--reverse .section__column:nth-of-type(4) {
    text-align: left;
  }
}

<section class="section">
  <div class="section__container">
    <div class="section__column">
      <h1 class="section__title">Title</h1>
    </div>
    <div class="section__column">
      <p class="section__lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatum architecto cupiditate, delectus pariatur molestiae nesciunt suscipit, odit nulla aspernatur assumenda labore, excepturi placeat quaerat voluptate, harum quis blanditiis
        explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatum architecto cupiditate, delectus pariatur molestiae nesciunt suscipit, odit nulla aspernatur assumenda labore, excepturi placeat quaerat voluptate, harum
        quis blanditiis explicabo.</p>
    </div>
    <div class="section__column">
      <img class="section__pict" src="https://payload.cargocollective.com/1/8/270313/14198122/header_R3-01_2000_c.png" alt="">
    </div>
    <div class="section__column">
      <button class="section__btn">Button</button>
    </div>
  </div>
</section>

<section class="section section--reverse">
  <div class="section__container">
    <div class="section__column">
      <h1 class="section__title">Title</h1>
    </div>
    <div class="section__column">
      <p class="section__lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatum architecto cupiditate, delectus pariatur molestiae nesciunt suscipit, odit nulla aspernatur assumenda labore, excepturi placeat quaerat voluptate, harum quis blanditiis
        explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatum architecto cupiditate, delectus pariatur molestiae nesciunt suscipit, odit nulla aspernatur assumenda labore, excepturi placeat quaerat voluptate, harum
        quis blanditiis explicabo.</p>
    </div>
    <div class="section__column">
      <img class="section__pict" src="https://payload.cargocollective.com/1/8/270313/14198122/header_R3-01_2000_c.png" alt="">
    </div>
    <div class="section__column">
      <button class="section__btn">Button</button>
    </div>
  </div>
</section>

Answer 3

@media screen and (orientation: landscape){
.x{float: right;}
}

<h1>header</h1>
<div>small text</div>
<b class='x'>123</b>
<img class='x'/>
<button>кнопка</button>

screen - только десктоп
handheld - только смартфоны
orientation: landscape - с альбомной ориентацией
orientation: portrait - с портретной ориентацией

p.s. поскольку как на телефоне вполне бывает альбомная ориентация так и на десктопе бывает портретная, выбрать разумнее всего будет только orientation: landscape в качестве селектора.

UPD:

поскольку бывают десктопы с экраном мельче некоторых смартфонов(у нетбуков например легко может попасться жалкий 800*600) все же стоит исходить из того с какой минимальной шириной флоат выглядит сносно @media (min-width: 800px) {}

БЛОГ НА HUSL

Не могу понять как построить блок HTML, CSS

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