CODEWITHSUNDEEP
css
justinw
justinw

Reputation: 3966

Re-order divs for responsive design

I am working on a responsive design and I would like to re-order some divs at certain breakpoints. I am not sure if this is even possible, but here it goes.

Here is a rough fiddle showing the current layout: http://jsfiddle.net/Ubjmc/ above a certain breakpoint. As you can see the order (of the divs) go - one, two and then three.

And this is how I want it to look after my breakpoint: http://jsfiddle.net/AfT4D/ The order of the divs for this one is - one, three and then two.

I am not sure this is possible to do with straight css. What I have been doing so far is making a 4th element that hides above the breakpoint and shows after the breakpoint and then hiding the element it replaces at that breakpoint (hopefully that makes sense).

Is that method the only reliable css-only way of doing what I'd like (that isn't extremely convoluted)?

Edit - I already have my breakpoint set and am using media queries. The second fiddle in my example is how I want the first to look, in the order of the first (or I want to find out if that is possible).

<div class="wrap">
    <div class="one"></div>
     <div class="two"></div>
    <div class="three"></div>
</div>

The question is if I have my order like shown in the code above, if there any possible way to get it to look like this: http://jsfiddle.net/AfT4D/, without editing the order of the divs?

Upvotes: 5

Views: 3525

Answers (4)

vals
vals

Reputation: 64164

You have already a property in CSS called order, and it is available in flex display.

Set the container to 

.wrap {
    display: flex;
    flex-wrap: wrap;
}

Then you can set the order 3 to two

.two {
    order: 3;
}

And that is it !

demo

Support isn't very high, but it is coming (Firefox should release flex-wrap support this month)

Upvotes: 3

user3190555
user3190555

Reputation:

JSFiddle Example: http://jsfiddle.net/Ubjmc/1/

You have to put below 

<div class="wrap">
 <div class="one"></div>
 <div class="three"></div>
 <div class="two"></div>
</div>

And edit your CSS ( ??? = Screen Width ):

@media only screen and (max-width: ???px) {
 .one,.three{width:50% !important;}
 .two{width:100% !important;}
 .two{clear:both;}
}

.three {
float: right;
/* ... */
}

Upvotes: 0

apkisbossin
apkisbossin

Reputation: 344

You would have to use media queries, I think it would be better to do it in the HTML instead of css such as 

<link href="smartPhone.css" type="text/css" rel="stylesheet" media="screen and(min device-width : 320px) and (max-device-width : 480px)>


<link href="tablets.css" type="text/css" rel="stylesheet" media="screen and(min device-width : 481px) and (max-device-width : 1024px)>


<link href="computer.css" type="text/css" rel="stylesheet" media="screen and(min device-width : 1025px)>

You can find out more here http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=T7Km4lhd7oK

Upvotes: 0

Ryan
Ryan

Reputation: 15270

You'll want to investigate media queries. This way you can customize the layout at different widths.

Here's a starter template:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

If you're having trouble getting the desired results, you can also try jQuery's insertAfter and insertBefore and build the columns on the fly based on screen size.

Upvotes: -1

Related Questions