I am creating a responsive web page with an infographic content and I encounter this problem:

The html structure where my problem is,

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="three card"></div>    
    <div class="two card"></div>
    <div class="one card"></div>
</div>

On viewport above 600px, I want my infographic to display horizontally (each card @display: inline-block) with each layer starts alternately which works fine.

The problem is, if the viewport is less than 600px, I am trying to display the infographic vertically (each card @display: block). with this structure(not alternating):

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>

What would be the best way to shift my structure from the first into the second one when the viewport is below 600px?

Here's an example

I am creating a responsive web page with an infographic content and I encounter this problem:

The html structure where my problem is,

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="three card"></div>    
    <div class="two card"></div>
    <div class="one card"></div>
</div>

On viewport above 600px, I want my infographic to display horizontally (each card @display: inline-block) with each layer starts alternately which works fine.

The problem is, if the viewport is less than 600px, I am trying to display the infographic vertically (each card @display: block). with this structure(not alternating):

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>

What would be the best way to shift my structure from the first into the second one when the viewport is below 600px?

Here's an example

• javascript
• jquery
• html
• css
• responsive-design

• pure css?? or jquery???? – Bhojendra Rauniyar Commented Sep 4, 2014 at 8:41
• @C-linkNepal What would be the best way? – Fahren Commented Sep 4, 2014 at 8:44
• If you can use jquery then it's easily shifted.... – Bhojendra Rauniyar Commented Sep 4, 2014 at 8:45
• Do they have explicit heights? – Hashem Qolami Commented Sep 4, 2014 at 8:50

5 Answers 5

As a pure CSS solution you could rotate the .holder container by 180 degree and then rotate the boxes by -180 degree to reverse the ordering:

EXAMPLE HERE

@media (max-width: 600px) {
    .card { display: block; }

    .holder + .holder {
        transform: rotate(180deg);
        direction: rtl; /* Fix the horizontally alignment */
    }

    .holder + .holder .card {
        transform: rotate(-180deg);
        direction: ltr;  /* Fix the horizontally alignment */
    }
}

It is worth noting that CSS transforms are supported in IE9+.

It would be much simple if they all have an explicit height and the number of them is fixed so that you can move them visually by relative positioning.

.card {
    display: block;
    position: relative;
}

.holder + .holder > :first-child {
    top: 200px;
}

.holder + .holder > :last-child {
    top: -200px;
}

You may reverse the order of the items of the second .holder element playing a bit with display: table | table-footer-group | table-header-group.

Try rewriting your media query like so : http://jsfiddle/bs5dam2j/

@media (max-width: 400px){

    .holder .card { display: block; }

    .holder + .holder { display: table; }
    .holder + .holder .one { display: table-header-group; } 
    .holder + .holder .three { display: table-footer-group; } 

    /* trick to show .one and .three when they are empty */
    .holder + .holder .card:before {
      display: inline-block;
      content: "";
      height: 100px;
      width: 1px;
    }
}

For >600px use .card{ float-left; width: (100 / 3)% };
For <600px use .card{ float: none; display: block; width: 100%; }

Just change your .holder CSS display:inline-block; to :

.holder{
    float:left;
}

DEMO

With jquery, you can reverse the order of html like below:

$(window).on('resize',function(){
    if($(window).width()<600){
      var div= $('.holder');
      var divItems = div.children('.card');
      div.append(divItems.get().reverse());
    }
}).resize();