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.

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.

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

• 1 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 Commented Jan 27, 2014 at 12:58
• First of all you have invalid html. You must close your li elements. </li> – laaposto Commented Jan 27, 2014 at 12:58
• size means Height or Width ? – NiiL Commented Jan 27, 2014 at 13:05
• Size means - I am concerned about Width. – Syed Commented Jan 27, 2014 at 13:06
• 1 @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 <li> than you need - either close using slash (</li>) or take out the trailing <li>" – Julix Commented Jan 4, 2019 at 17:57

4 Answers 4

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

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

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

Demo: http://jsfiddle/LsYzv/

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>

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