Make two divs on one line

I have three child divs with class span2, span7 and span3 respectively. When my browser width is between 764px and 925px, I want it to be in that order span2, span3 on the first line, and span7 on the 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%;
    }
}