Rearrange divs through css

Question

I have three 3 child div\'s with class span2, span7 and span3 respectively. When my browser width is below 763px I want it to be in this order span2, span3 and span7. How will I

Answer 1

You could achieve this by using flexible boxes layout and flex order like this:

JSFiddle - DEMO

.row-fluid > div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
@media (max-width: 763px) {
    .row-fluid {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .span2 {
        order: 1;
    }
    .span7 {
        order: 3;
    }
    .span3 {
        order: 2;
    }
}

    
span2
    
span7
    
span3