Make two divs in one line

Question

I have three 3 child div's with class span2, span7 and span3 respectively. When my browser width is between 764px and 925px I want it to be in this order span2, span3 in first line and span7 in next line.

Here is my HTML code:

<div class="row-fluid">    
    <div class="span2">           
    </div>      
    <div class="span7"> 
    </div>        
    <div class="span3">                                       
    </div>      
</div> 

initial css code:

@media only screen  and (min-width: 764px)  and (max-width: 925px){

    .row-fluid{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .span2 {
        order: 1;
    }
    .span7 {
        order: 3;
    }
    .span3 {
        order: 2;
    }   

    .row-fluid > .span2{   
        width: 45%;   
        height: 360px;          
    }
    .row-fluid > .span3{   
        width: 48%;   
        height: 360px;        
    }
    .row-fluid > .span7{    
        width: 100%;
    }
}

Answer 1

Remove the flex-direction: column; from .row-fluid

JSFiddle - DEMO

 .row-fluid > div { border:1px solid red; } @media only screen and (min-width: 764px) and (max-width: 925px) { .row-fluid { display: flex; flex-wrap: wrap; } .span2 { order: 1; } .span7 { order: 3; } .span3 { order: 2; } .row-fluid > .span2 { width: 45%; height: 360px; } .row-fluid > .span3 { width: 48%; height: 360px; } .row-fluid > .span7 { width: 100%; } } 

 <div class="row-fluid"> <div class="span2">span2</div> <div class="span7">span7</div> <div class="span3">span3</div> </div>