Bootstrap 4.1 blog grille post grille avec trois colonnes, deux points d'arrêt et de réordonnancement

Pour ce blog, je voulais que la page de blog ait trois'colonnes'. Pourquoi ai-je cité le mot colonnes ? Parce que ce qui est une colonne sur un grand écran peut être une ligne sur un appareil mobile. Bootstrap utilise des conteneurs, des lignes et des colonnes. Et bien sûr, une colonne Bootstrap peut s'afficher à l'écran comme une colonne ou une ligne. A l'aide !

Lors de la conception d'une mise en page, nous ne devons pas penser aux colonnes, mais aux éléments de l'écran et à la façon dont nous les voulons à l'écran sur différents appareils. En tant que développeur, je suis assis derrière un moniteur toute la journée et je voulais voir trois colonnes, désolé, des éléments d'écran :

A | B | C

A est la partie la moins importante et la plus petite, je n'ai pas de contenu particulier en tête pour le moment. Dans un premier temps, il peut être utilisé comme entretoise sur des appareils de grande taille.
B est bien sûr la partie la plus importante de la page, le contenu, le billet du blog. C'est la plus grande en largeur.
C est la prochaine partie la plus importante contenant, la recherche, les balises, les informations sélectionnées. C'est la deuxième plus grande en largeur.

Sur les appareils mobiles, je voulais que ça ressemble à ça :

B
C
A A

Pour les appareils entre grands et petits, je voulais qu'ils ressemblent à ça :

B | C
A A

Maintenant, comment on fait ça ? Étant un noob de Bootstrap, j'ai cherché sur le web des solutions de copier-coller mais je n'ai rien trouvé de proche. Il est temps de commencer à lire. Lorsque vous recherchez vous obtenez de nouveaux mots-clés que vous pouvez utiliser dans vos recherches et j'ai finalement frappé le post'Comment réorganiser les colonnes avec Bootstrap 4 Classes d'ordre' et toutes les pièces se sont mises en place. Tout d'abord, Bootstrap parle d'appareils et nous nous en tenons à cette terminologie. Deuxièmement, Bootstrap est d'abord mobile, nous devrions donc commencer par le plus petit appareil. C'est très important pour comprendre comment nous pouvons changer l'ordre des éléments !

Nous commençons par les dispositifs extra petits (xs) et les petits dispositifs (sm), puis les dispositifs moyens (md) et enfin nous avons les grands dispositifs (lg) et les très grands dispositifs (xl). J'ai ajouté des classes elem-1-content, elem-2-information et elem-3-moins-important pour ajouter quelques couleurs pour faciliter l'affichage de ce qui se passe.

Pour le plus petit appareil, nous réglons la classe à col-12, ce qui fait de chaque colonne la largeur maximale et donne trois lignes visibles, le contenu, l'information, le moins important :

<div class="container">
    <div class="row">

        <div class="col-12 elem-1-content">
            Content
        </div>

        <div class="col-12 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Pour l'appareil moyen, nous réglons la classe de la colonne de contenu sur md-9 et la classe de la colonne d'information sur md-3 en les mettant sur la même ligne. La colonne la moins importante utilise toujours le maximum de 12, réglé pour le plus petit appareil, pas besoin d'ajouter quoi que ce soit ici :

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 elem-2-information">
            Information
        </div>

        <div class="col-12 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Enfin, pour le gros appareil, nous réglons la classe de la colonne de contenu à lg-8, la classe de la colonne d'information à lg-3 et la classe de la colonne la moins importante à lg-1. Maintenant, nous avons besoin d'un réordonnancement Bootstrap pour mettre les colonnes aux bonnes positions. Ajoutez order-lg-1 à la colonne la moins importante pour la placer à la position la plus à gauche, order-lg-12 à la colonne d'information pour la placer à la position la plus à droite et order-lg-10 à la colonne de contenu pour la placer entre les deux :

<div class="container">
    <div class="row">

        <div class="col-12 col-md-9 col-lg-8 order-lg-10 elem-1-content">
            Content
        </div>

        <div class="col-12 col-md-3 col-lg-3 order-lg-12 elem-2-information">
            Information
        </div>

        <div class="col-12 col-lg-1 order-lg-1 elem-3-least-important">
            Least important
        </div>

    </div>
</div>

Les étapes sont indiquées ci-dessous. Pour les voir, vous devez être derrière un'grand' moniteur et redimensionner votre navigateur :

Liens / crédits

Bootstrap Grid system Reordering
https://getbootstrap.com/docs/4.0/layout/grid/#reordering

How to Reorder Columns with Bootstrap 4 Order Classes
https://bootstrapcreative.com/bootstrap-push-pull-column-ordering-tutorial/