Correction : pour insérer l'image :

                ...
                <div class="col-md">
                    <article>
                        <h2>Article 1</h2>
                        <p>Ideo urbs venerabilis post superbas efferatarum gentium cervices 
                            oppressas latasque leges fundamenta libertatis et retinacula sempiterna 
                            velut frugi parens et prudens et dives Caesaribus tamquam liberis suis
                            regenda patrimonii iura permisit.
                        </p>
                        <img src="images/700px-Campus_de_Grenoble.jpg" alt="campus UGA"/>
                        <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia)
                            querebatur, quod omnibus in rebus homines diligentiores essent.
                        </p>
                    </article>
                </div>
                ...

Au niveau de l'affichage, on constate que la largeur de la colonne de l'article 1 s'adpate pour intégrer toute l'image et que lorsque la largeur de la fenêtre du navigateur n'est pas suffisante l'article 3 (puis l'article deux) sont affichés sur la ligne suivante.

Si on spécifie explictement un largeur de colonne pour l'article 1 en remplaçant

<div class="col-md">

par

<div class="col-md-3">

on rétablit bien l'affichage en ligne des 3 articles, mais l'image dépasse de la colonne de l'article 1.