CODEWITHSUNDEEP
htmlcss
j_d
j_d

Reputation: 3082

Reorder divs on media query with line break

Here is a fiddle to essentially what I want to do - reorder divs using floating to float the middle div to the left on smaller screen sizes, and the outer two to the right.

Here's the current order:

<div id='one'></div>
<div id='two'></div>
<div id='three'></div>

In addition to what's already there, I want the outer two divs to sit underneath the middle div on the left. Essentially I want it to look like:

<div id='two'></div>
<div id='one'></div>
<div id='three'></div>

Where div two has display:block, and display one/three have display:inline-block - without changing the html.

Is this possible with just CSS?

Upvotes: 1

Views: 600

Answers (1)

andyderuyter
andyderuyter

Reputation: 1111

This can be done:

<div class="boxes"> 
    <div class="one box">Box One</div> 
    <div class="two box">Box Two</div> 
    <div class="three box">Box Three</div> 
    <div class="four box">Box Four</div> 
</div>

CSS:

@media only screen and (max-width:768px) { 
    .boxes {  
    display:table; 
    width:100%; 
} 
.box { 
    display:block; 
    width:100%; 
} 
    .three { display:table-caption; } 
    .four { display:table-header-group; } 
    .one { display:table-footer-group; } 
}

Source: http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table (check the demo linked)

Upvotes: 2

Related Questions