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>