Сделать div отзывчивым и оформить его для отображения новостей

Question

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

#parent {
  display: flex;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}

#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Answer 1

Вы можете просто использовать медиа-запрос следующим образом:

#parent {
  display: flex;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}

#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

@media all and (max-width:800px) {
  #wide,
  #narrow {
    flex: 0 0 100%;
  }
  #parent {
    flex-wrap: wrap;
  }
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Просто измените значение 800px на то, что вам нужно (я использую его, чтобы показать результат здесь)