Rearrange Divs Through Css
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
Solution 1:
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;
}
}
<divclass="row-fluid"><divclass="span2">span2</div><divclass="span7">span7</div><divclass="span3">span3</div></div>
Post a Comment for "Rearrange Divs Through Css"