Making Flexbox Responsive

I'm using flexbox to create rows of 4 items. When I resize screen, everything gets smaller, but I also want row to split up into to 2 rows of 2 instead of 1 row of four. And event

Solution 1:

You need to use @media to achieve this

.article-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.articles {
  margin-top: 20px;
}

.articlesh2 {
  width: 100%;
  margin-bottom: 20px;
}

.article {
  width: 22%;
}

.articleimg {
  width: 100%;
}

.article-title {
  font-weight: bold;
}

.article-creator {
  font-style: italic;
  margin-top: 5px;
}

@media screen and (max-width: 767px) {
  .article {
    width: 50%;
  }
}

<sectionclass="articles"><h2>Trending</h2><divclass="article-wrapper"><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div></div></section>

working fiddle here