Reorder divs for responsive design

Question

I am working on a responsive design, and I would like to reorder some divs at specific breakpoints. I'm not sure if this is possible, but here it is.

Here is a crude fiddle showing the current layout: http://jsfiddle.net/Ubjmc/ above a specific breakpoint. As you can see that the order (divs) is - one, twothen three.

And that's how I want him watching my breakpoint: http://jsfiddle.net/AfT4D/ Order divs for that - one, threeand then two.

I'm not sure if this is possible with direct css. What I have done so far is to make the fourth element, which hides above the breakpoint and shows after the breakpoint, and then hides the element that it replaces at this breakpoint (I hope this makes sense).

Is this method the only reliable way just for CSS to do what I would like (which is not extremely difficult)?

Change . I already have my control set installed and I use media queries. The second scenario in my example is how I want the first to look in the order of the first (or I want to find out if this is possible).

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

, , , : http://jsfiddle.net/AfT4D/, divs?

Answer 1

CSS, , .

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

3

.two {
    order: 3;
}

!

, (Firefox Flex-wrap )

Answer 2

media queries, , HTML css,

<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)>

http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=T7Km4lhd7oK

Answer 3

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

You should put .three below .one

<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;
/* ... */
}

Answer 4

You want to explore media queries. This way you can customize the layout with different widths.

Here's the 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 are having trouble getting the desired results, you can also try jQuery insertAfterand insertBeforeand build the columns "on the fly" based on the screen size.