Div переходит под первый div при изменении размера страницы

Question

У меня есть что-то вроде этого:

HTML:

<div id="container">
    <img src="leftphoto.jpg" id="left">
    <div id="right">Description</div>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
  background-color:#252525;
}
#container{
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  height: 40vw;
}
#left{
  max-width: 75vw;
  height:100%;
}
#right{
  min-width: 300px;
  height:100%;
  color:white;
  width:20vw;
  background-color: red;
  color: #ffffff;
  font-size: 11px;
  overflow: auto;
}

Я хочу правильный div для go вниз, под левым div с такой же шириной. Как мне этого добиться?

Что у меня есть:

Когда я изменяю размер окна, оно становится меньше:

Но я хочу, чтобы правый div был на go вниз, под левым div, а также я хотел бы получить одинаковую ширину для обоих div:

Я пробовал много разных вещей, но не смог этого добиться. Есть ли у вас какие-либо советы?

Answer 1

Вы можете использовать Flex Blox для достижения этой цели. Просто поместите на контейнер с div. Как только это будет сделано, вы можете изменить расположение divs flex-direction строка / столбец. Аналогично, для размещения 2-го делителя над первым делением после уменьшения размера вы можете задать медиазапрос для определенного экрана c, где вы можете повернуть столбец и все готово.

.container{
    display: flex;
    flex-direction: row;
}



@media screen and (max-width:768px){
  .container{
    display: flex;
    flex-direction: column-reverse
  }
}

<div class="container">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
  </div>
  <div class="content">
    <p>Content</p>
  </div>
</div>

Answer 2

Создайте второй контейнер в вашем html, и он будет естественным образом выравниваться под каждым другим

<div class="container">
      <div class="content-Container">
        <img src="leftphoto.jpg" id="left" />
        <div id="right">Description</div>
      </div>
    </div>

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