html - 通过css重新排列div

Question

我有三个 3 子 div，分别具有类 span2、span7 和 span3。当我的浏览器宽度低于 763px 时，我希望它按照 span2、span3 和 span7 的顺序排列。我将如何通过 CSS 做到这一点？

这是我的初始代码:

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

Answer 1

您可以通过使用 flexible boxes 来实现此目的布局和 flex order像这样:

JSFiddle - DEMO

.row-fluid > div {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
@media (max-width: 763px) {
    .row-fluid {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .span2 {
        order: 1;
    }
    .span7 {
        order: 3;
    }
    .span3 {
        order: 2;
    }
}

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