CSS - Flexbox


Tijdens het ontwikkelen van een layout die responsive is kan het handig zijn om de volgorde van div's op een gegeven moment aan te passen. Dit kan op de onderstaande manier eenvoudig bereikt worden waarbij er ondersteuning is van alle moderne browsers.

Een simpele opzet is als volgt. Je maakt als eerste een omliggende div, in het onderstaande voorbeeld met de classnaam wrapper. Vervolgens plaats je enkele div's binnen deze wrapper en kan er voor elke div een positie worden aangegeven die je middels media queries dus weer kunt overschrijven, bijvoorbeeld voor een mobiel apparaat.

Hieronder zie je eerst de CSS en eronder de bijbehorende HTML code.

div.wrapper {
        float:left;
        width:100%;
        display: -webkit-flex;
        display: flex;
}
div.block {
        float:left;
        width:25%;
}
div.block-1 {
        order:2;
        -webkit-order:2;
}
div.block-2 {
        order:4;
        -webkit-order:4;
}
div.block-3 {
        order:3;
        -webkit-order:3;
}
div.block-4 {
        order:1;
        -webkit-order:1;
}
@media screen and (min-width:250px) and (max-width:1000px) {
        div.block-1 {
                order:3;
                -webkit-order:3;
        }
        div.block-2 {
                order:4;
                -webkit-order:4;
        }
        div.block-3 {
                order:1;
                -webkit-order:1;
        }
        div.block-4 {
                order:2;
                -webkit-order:2;
        }
}


<div class="wrapper">
        <div class="block block-1">A</div>
        <div class="block block-2">B</div>
        <div class="block block-3">C</div>
        <div class="block block-4">D</div>
</div>


A
B
C
D