How to reorder list items on window resize using jQuery/media queries

Question

I am trying to do some responsive fix - Currently I have a list somthing like this:

<ul>
  <li>666</li>
  <li>555</li>
  <li>444</li>
  <li>333</li>
  <li>222</li>
  <li>111</li>
</ul>

If the screen size is less then 767px, I like it to change the order like this :

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
  <li>666</li>
</ul>

And fix them back to current state if the size increases.

I understand that this cannot be done through CSS media query, I need your help fixing it through jQuery.

Thanks for your help in advance.

Without knowing the purpose and layout of that list, I'd go with flexbox and doing flex-direction: row-reverse; with mediaqueries. Does that sound feasible? — Samuli Hakoniemi, Jan 27 '14 at 12:58
First of all you have invalid html. You must close your `li` elements. `` — laaposto, Jan 27 '14 at 12:58
@laaposto - not true here: https://stackoverflow.com/a/20550925 — Julix, Jan 03 '19 at 21:11
@laaposto - Seems I should have checked the edit history to know what you meant - obviously that's not valid. I just took you literally by your word "must close your li", which isn't accurate, but given the weird markup I get why you said that. It's simpler than "must not open more

Salman A · Accepted Answer · 2014-01-27T14:31:12.390

You can reverse the elements in ul elements like this:

$("ul").append(function(){
    return $(this).children().detach().toArray().reverse();
});

Combined with window.resize:

var resizeTimeout, sortedReverse = false;
$(window).resize(function () {
    // window.resize fires too rapidly for our liking
    // use clear-set timeout approach
    if (resizeTimeout) {
        window.clearTimeout(resizeTimeout);
    }
    resizeTimeout = window.setTimeout(function () {
        var windowWidth = $(window).width();
        // sortedReverse flag is used to ensure that
        // we do not reverse the list unnecessarily
        if ((windowWidth < 767 && !sortedReverse) || (windowWidth >= 767 && sortedReverse)) {
            $("ul").append(function () {
                return $(this).children().detach().toArray().reverse();
            });
            sortedReverse = !sortedReverse;
        }
    }, 100);
}).trigger("resize");

Demo here

**+1** for spending your time to make a clean solution :) – MackieeE Jan 27 '14 at 14:06 — MackieeE, Jan 27 '14 at 14:06

score 2 · Answer 2 · edited May 23 '17 at 12:34

2

If you just want to reverse the order of the children of a specific element, you could do tis:

$.fn.reverseChildren = function() {
  return this.each(function(){
    var $this = $(this);
    $this.children().each(function(){ $this.prepend(this) });
  });
};

$("ul").reverseChildren();

Fiddle

Reference: Reverse order of a set of elements

edited May 23 '17 at 12:34

Community

1
1

answered Jan 27 '14 at 13:08

James Hibbard

16,490
14
62
74

MackieeE · Answer 3 · 2014-01-27T13:21:09.483

1

$(window).resize(function () {
    if ($(window).width() <= 767) {
        $('ul').append( $.makeArray( $('ul li') ).reverse() );
    }
});

Demo: http://jsfiddle.net/LsYzv/

edited Jan 27 '14 at 13:21

answered Jan 27 '14 at 13:11

MackieeE

11,751
4
39
56

score 1 · Answer 4 · answered Oct 02 '18 at 13:13

First of all: I do not like it when people say "this cannot be done" Of course it can be done with PURE CSS.

display:flex is helping you in so many ways!

HTML:

<ul>
  <li>666</li>
  <li>555</li>
  <li>444</li>
  <li>333</li>
  <li>222</li>
  <li>111</li>
</ul>

CSS:

ul{
    display:flex;
    list-style: none;
    flex-direction:column;
}
@media(max-width: 766px){
    ul{
        flex-direction:column-reverse;
    }
}

Here the Fiddle and also the embeded Code:

ul{
 display:flex;
 flex-direction:column;
 list-style: none;
}
@media(max-width: 766px){
 ul{
  flex-direction:column-reverse;
 }
}

<ul>
  <li>666</li>
  <li>555</li>
  <li>444</li>
  <li>333</li>
  <li>222</li>
  <li>111</li>
</ul>

How to reorder list items on window resize using jQuery/media queries

4 Answers4

Dont forget: nothing is better then pure CSS which is working flawless!!!