FlexBox_habr order

by Alex

HTML

<div class="flex">
    <div class="flex-itm order-2">1</div>
    <div class="flex-itm order-4">2</div>
    <div class="flex-itm order-1">3</div>
    <div class="flex-itm order-3">4</div>
</div>

CSS

html {
    font-family: sans-serif;
}

.flex {
    background: #a55;
    margin: 20px 0;
    padding: 5px;
    
    display: flex;
}
.flex-itm {
    background: #5a5;
    font-size: 2.5rem;
    color: #eee;
    margin: 5px;
    padding: 50px;
}
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 4;
}