Javascript 在一条线上划两个div

我有三个分别为span2、span7和span3班的3个儿童部门。当我的浏览器宽度在764px和925px之间时，我希望它的顺序是第一行中的span2、span3和下一行中的span7

以下是我的HTML代码：

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

---

移除

柔性方向：列来自
。行流体

JSFiddle-


.row流体>div{
边框：1px纯红；
}
@仅介质屏幕和（最小宽度：764px）和（最大宽度：925px）{
.世界其他地区{
显示器：flex；
柔性包装：包装；
}
.span2{
顺序：1；
}
.span7{
顺序：3；
}
.span3{
顺序：2；
}
.row流体>.span2{
宽度：45%；
高度：360px；
}
.row流体>.span3{
宽度：48%；
高度：360px；
}
.row流体>.span7{
宽度：100%；
}
}

span2
span7
span3
me中的强迫症坚持你也要增加
width:93%；右边填充：2.23px到
.row fluid>.span7
，以便它与上面的两个对齐。：-）@艾丽丝·萨戈诺啊！我不应该添加
flex-direction:column在我对你最后一个问题的回答中。抱歉lol:）@MaryMelody-->没关系，你帮了大忙。
@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%;
    }
}