通过CSS重新排列div [英] Rearrange divs through css

问题描述

我有三个分别为span2，span7和span3的3个子div。当我的浏览器宽度低于763px时，我希望它的顺序是span2，span3和span7。如何通过css来做到这一点？

这是我的初始代码：

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

解决方案

您可以使用 flexible boxes layout and 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：列; } .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>

I have three 3 child div's with class span2, span7 and span3 respectively. When my browser width is below 763px I want it to be in this order span2, span3 and span7. How will I do that through css?

Here is my initial code:

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

解决方案

You could achieve this by using flexible boxes layout and flex order like this:

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>

这篇关于通过CSS重新排列div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！