<div class="articles">
  <article>
    <div class="image"></div>
    <p>Titular noticia 1</p>
  </article>
  <article>
    <div class="image"></div>
    <p>Titular noticia 2</p>
  </article>
  <article>
    <div class="image"></div>
    <p>Titular noticia 3 un poco más largo</p>
  </article>
  <article>
    <div class="image"></div>
    <p>Titular noticia 4</p>
  </article>
</div><!-- .articles -->
/********************************/
/* CSS auxiliar para el ejemplo */
/********************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  vertical-align: middle;
}
/********************************/
.articles {
  display: flex;
  padding: 20px;
  width: 100%;
  max-width: 800px;
  background-color: black;
}
article {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 25%;
  border: 1px solid white;
  color: white;
  font-family: "Roboto", sans-serif;
  text-align: center;
}
article .image {
  width: 100%;
  height: 150px;
  background-image: url("http://via.placeholder.com/400x300");
  background-size: cover;
  background-position: center center;
}
article p{
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

@media screen and (max-width: 800px) {
  .articles{
    flex-wrap: wrap;
  }
  article {
    width: 50%;
  }
}
@media screen and (max-width: 400px) {
  article {
    width: 100%;
  }
}
Rerun