CSS imagen grande y pequeñas con texto al final

[Rafael]

Simplemente crea una clase nueva news1 con un ancho del 100%.

Un problema es que a las imágenes de dentro del news las tienes definidas en pixeles. Elimina eso. Pon dentro las imagenes como width: 100%. y elimina el height. Esto hará que las imagenes se adapten al contenedor.

Lo que veo es que tienes cosas un tanto sin sentido, como posiciones relativas. Hay que limpiar ese código.

Te dejo un fiddle https://jsfiddle.net/p5uxpnkx/



Vas a notar dos cosas. Le tiré completamente los classes de cada div, para que sea más rápido modificar simplemente poniendo un div arriba.

El uso de padres e hijos en el CSS parent>div

Código CSS:

.newshome{
    max-width:430px;
    margin:0 auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    alignt-items:center;
    justify-content:space-between;
}
 
.newshome>div {width: 47%;}
.newshome>div:first-child {width: 100%;}
.newshome>div>img {width: 100%;}
 

Código HTML:

<section class="newshome">
<div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Media Maratón de Lima 2016 permitirá plantar más de 15 mil árboles</p>
</div>
<div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Texto o titulo de la noticia para mostrar.</p>
</div>
 <div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Texto o titulo de la noticia para mostrar.</p>
</div>
 <div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Texto o titulo de la noticia para mostrar.</p>
</div>
 <div>
<img src="http://3.bp.blogspot.com/-JfL1o7oSnKI/VmodObHF9cI/AAAAAAAABLY/nKKRXw0-yiU/s1600/homero_456_336.jpg" alt="foto" /><p>Choferes manejaban sin brevete y debían más de medio millón de soles en papeletas</p>
</div>
</section>