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

Question

Теперь понятней, существует определенные блоки с содержимым, которое расположено через раз по разному(см. изображение ниже). Как разместить их в десктопной версии я понимаю, а как мне расположить их содержимое так, чтобы при адаптивной, они все были в одном порядке?

Как блоки выглядят в десктопной версии:

Как блоки должны будут выглядеть в версии для планшетов:

Вроде задание простое, но я почему-то уже второй раз с ним сталкиваюсь и второй раз не могу понять как сделать ПРАВИЛЬНО при адаптиве. Спасибо ВСЕМ за помощь! :)

Answer 1

Я думаю, что вам может подойти решение на Flex. Но вообще такие большие блоки все таки сетка и делать их лучше на Grid. Этим потом очень легко управлять!

Решение на flex.

* { 
 box-sizing: border-box;
}  

body { 
  margin: 0; 
  padding: 0;
} 

.col2-flex {  
  display: flex;   
  align-items: center;
}

.wrapper { 
  margin: 0 auto;  
  max-width: 1280px;
}   

.business__img { 
  display: block;  
  width: 100%; 
} 
 

  @media (max-width: 768px) {
    .business__info { 
      order: 1;
  }  
    
  .col2-flex {  
    display: flex;   
    flex-direction: column;
  }
    
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CodePen Home
flex-adaptive</title>
</head>
<body>  
  <section class="business"> 
    <div class="wrapper col2-flex">  
      <div class="business__info"> 
        <h2 class="business__title">Lorem ipsum dolor sit amet.</h2> 
          <p class="business__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, adipisci minima assumenda ut quia repudiandae praesentium libero ducimus perspiciatis debitis ad porro cumque ipsum quod mollitia facere, provident quis ipsa, nulla possimus eius quibusdam maiores sapiente placeat. Omnis ipsam quae dolore cum, veniam asperiores! Totam ea minima voluptas a quisquam, quaerat magnam veniam repellat odit. 
        </p> 
      </div> 
      
      <div class="business__pack"> 
        <img class="business__img" src="https://www.cssauthor.com/wp-content/uploads/2015/01/Creative-Button-Styles.jpg" alt="btn styles">
      </div>
    </div> 
  </section>
</body>
</html>

Answer 2

JSFiddle

*,
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font: 18px/1 sans-serif;
  max-width: 960px;
  margin: 0 auto;
  min-height: 100vh;
  width: 100%;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 12px 24px;
}

section div {
  align-items: center;
  background: lightblue;
  display: flex;
  min-height: 200px;
  justify-content: center;
}

@media (max-width: 768px) {
  section {
    grid-template-columns: 1fr;
  }

}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page style</title>
  </head>

  <body>
    <section>
      <div>Стартовая страница</div>
      <div>В командировке как дома</div>
    </section>
    <section>
      <div>Таблица №1</div>
      <div>Страница выдачи</div>
    </section>
    <section>
      <div>Персонализация выбора</div>
      <div>Таблица №2</div>
    </section>
  </body>

</html>

БЛОГ НА HUSL

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

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