Question

我有三个3子div，分别为span2，span7和span3。当我的浏览器宽度介于764px和925px之间时，我希望它的顺序为span2，第一行为span3，下一行为span7。

这是我的HTML代码：

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

初始css代码：

@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

从flex-direction: column;

中删除.row-fluid

JSFiddle - DEMO

＆＃13;

.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%;
    }
}

＆＃13;

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

＆＃13;

在一行中创建两个div

1 个答案: