reorder div with css

Question

I have divs sorted 1, 2, 3 ... as html layout

HTML:

<div class="bigdiv">
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
    <div class="div3">div 3</div>
</div>

CSS:

.div1 {
    float: left; 
}

.div2 {
    float: left;     
 }

 .div3 {
    float: left;     
 }

How can I reorder divs to this layout with CSS

<div class="bigdiv">
    <div class="div3">div 3</div>
    <br>
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
</div>

by CSS (float, :after, :before)

My try:

.div3 {
    float: right; 
} 
.div3:before {
    content: '\A\A';
    white-space: pre;
}

Thank you in advance.

Answer 1

You can do this with the CSS Flexible Box Layout Module

The ‘order’ property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

A flex container will lay out its content starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the elements were reordered in the document. (W3.org)

FIDDLE

CSS (Without browser specifics)

.bigdiv {

    display: flex;
    flex-direction: row;
    }

.div1 {
    order: 2;
 }

.div2 {
    order: 3;
 }

.div3 {
    order: 1;
 }