Correction : Il s'agit simplement de modifier le nombre de colonnes utilisées par les différents articles. Mais avant, créons une feuille de style permettant de partager les mêmes styles entre les deux pages HTML.

<html>
    <head>
        <title>Ma 2ème page BS</title>
        ...
        <!-- styles pour la page -->
        <link href="mesStyles.css" rel="stylesheet" type="text/css"/>
    </head>
    </head>   
    <body>
        <div class="container-fluid> <!-- définit une grille -->
            <h1>Ma deuxième page bootstrap</h1>
            <div class="row"> <!-- définit une ligne pour les articles -->
                <div class="col-md-3"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-6"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-3"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
            </div>
            <hr>
            <div class="row"> <!-- définit une ligne pour les sections -->
                ...
            </div>
        </div>  
    </body>

Le premier et le troisième article occupent la même largeur. On peut omettre de spécifier une largeur pour eux et donc remplacer

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

par

<div class="col-md">