Bootstrap 4.1 blogpostraster met drie kolommen, twee breekpunten en een nieuwe bestelling.

Voor deze blog wilde ik dat de blogpostpagina drie 'columns' zou bevatten. Waarom heb ik de woord kolommen geciteerd? Want wat een kolom op een groot scherm is, kan een rij zijn op een mobiel apparaat. Bootstrap gebruikt containers, rijen en kolommen. En natuurlijk kan een Bootstrap kolom op het scherm worden weergegeven als een kolom of een rij. Help!

Bij het ontwerpen van een lay-out moeten we niet denken aan kolommen, maar aan schermelementen en hoe we ze op verschillende apparaten op het scherm willen hebben. Als ontwikkelaar zit ik de hele dag achter een monitor, dus ik wilde drie kolommen zien, sorry, schermelementen:

A B C

A is het minst belangrijke en kleinste deel, ik heb daar op dit moment geen specifieke inhoud voor in gedachten. In eerste instantie kan het gebruikt worden als afstandhouder op grote apparaten.
B is natuurlijk het belangrijkste deel van de pagina, de inhoud, de blog post. Het is de grootste in de breedte.
C is het volgende belangrijkste onderdeel dat bestaat uit, zoeken, tags, tags, geselecteerde informatie. Het is de op een na grootste in de breedte.

Op mobiele apparaten wilde ik dat het er zo uit zou zien:

B
C
A

Voor apparaten tussen groot en klein, wilde ik dat het er zo uit zou zien:

B | C
C A

Hoe doen we dit nu? Als Bootstrap noob zocht ik op het web naar copy-paste oplossingen, maar ik vond niets in de buurt. Tijd om te beginnen met lezen. Bij het onderzoek krijg je nieuwe trefwoorden die je kunt gebruiken in je zoekopdrachten en ik drukte uiteindelijk op de post 'How to Reorder Columns with Bootstrap 4 Order Classes' en alle stukken vielen op hun plaats. Ten eerste, Bootstrap praat over apparaten, dus we houden ons aan deze terminologie. Ten tweede is Bootstrap als eerste mobiel, dus we moeten beginnen met het kleinste apparaat. Dit is erg belangrijk om te begrijpen hoe we de volgorde van de elementen kunnen veranderen!

We beginnen met de extra kleine apparaten (xs) en kleine apparaten (sm), daarna zijn er de middelgrote apparaten (md) en tenslotte hebben we de grote apparaten (lg) en extra grote apparaten (xl). Ik heb klassen elem-1-inhoud, elem-2-informatie en elem-3 toegevoegd, die belangrijk zijn om wat kleuren toe te voegen zodat je gemakkelijk kunt zien wat er gebeurt.

Voor het kleinste apparaat stellen we de klasse in op col-12, waardoor elke kolom de maximale breedte heeft en drie zichtbare rijen, inhoud, informatie, het minst belangrijk is:

<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>

Voor het medium apparaat stellen we de klasse van de inhoudskolom in op md-9 en de klasse van de informatiekolom op md-3, waardoor ze in dezelfde rij komen te staan. De minst belangrijke kolom gebruikt nog steeds het maximum van 12, ingesteld voor het kleinste apparaat, hier hoeft niets te worden toegevoegd:

<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>

Tot slot stellen we voor het grote apparaat de klasse van de inhoudskolom in op lg-8, de klasse van de informatiekolom op lg-3 en de klasse van de minst belangrijke kolom lg-1. Nu moeten we Bootstrap opnieuw ordenen om de kolommen op de juiste posities te plaatsen. Voeg order-lg-1 toe aan de minst belangrijke kolom om deze op de meest linkse positie te plaatsen, order-lg-12 aan de informatiekolom om deze op de meest rechtse positie te plaatsen en order-lg-10 aan de inhoudskolom om deze ergens tussenin te plaatsen:

<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>

De stappen worden hieronder weergegeven. Om ze te zien moet je achter een 'grote' monitor zitten en de grootte van je browser aanpassen:

Links / credits

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/