How to reverse the order of elements in responsive mode

Question

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

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

score 5 · Answer 1 · answered Sep 04 '14 at 08:55

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;
}

Here is the **[Updated Demo](http://jsfiddle.net/hashem/oahrfn0j/5/)** of the second approach. — Hashem Qolami, Sep 04 '14 at 09:01

score 0 · Answer 2 · answered Sep 04 '14 at 08:42

0

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

answered Sep 04 '14 at 08:42

Justinas

41,402
5
66
96

score 0 · Answer 3 · answered Sep 04 '14 at 08:48

0

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

.holder{
    float:left;
}

DEMO

answered Sep 04 '14 at 08:48

user3241019

811
9
20

score 0 · Answer 4 · answered Sep 04 '14 at 08:49

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

score 0 · Accepted Answer · answered Sep 04 '14 at 08:56

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

thanks, i guess i read more about css display table.. I was trying with the js/jquery solution but i found this faster(performance)..And with js i have to write also a script to revert back the structure when viewport is again above 600px. — Fahren, Sep 04 '14 at 09:04

How to reverse the order of elements in responsive mode

5 Answers5

Linked