Responsive design with CSS3

Question

I used to work with responsive design. Now I have a feeling, but not sure, that it is possible to manage the position of each div by its id or class. For example:

<div id='first'></div>
<div id='second'></div>
<div id='third'></div>

In CSS you might be able to say:

@media (max-width: 600px) {
     // pseudo code
     #second: after #third
}

@media (max-width: 300px) {
     // pseudo code
     #first: after #third
}

Is it possible to manage the element that way without giving the position a value, left or right a value?

Answer 1

You can do this with flexbox using the order property.

FIDDLE (Resize browser window)

 .container { display: flex; } .container div { display: inline-block; margin: 40px; width: 100px; height: 100px; } .first { background: gold; } .second { background: tomato; } .third { background: aqua; } @media (max-width: 900px) { .second { order: 3; } } @media (max-width: 600px) { .second { order: 1; } } .first { order: 3; } } 

 <div class="container"> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> </div> 

Check out this css-tricks articl e for an overview of flexbox.