How to Change Div Order in JavaScript

Change div order in CSS or javascript

In Javascript you could simply reorder them on the page.

With CSS it would be possible to swap them left and right if they were side by side (with some conditions), but not one above the other.

How to change div order in javascript

Assuming you're using jQuery, then use this :

$('#navigation').insertAfter( ".container" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title></head><body><div id="navigation">            <div class="item" style="display:inline;">                        <a href="index.html">Home</a>           </div>    <div class="item" style="display:inline;">Blog: Kannu</div> </div>

  <div class="row subheader">  <div class="container">   <div id="blogsubheader">My Blog</div>  </div> </div></body></html>

I want to Change Div Order with jquery or javascript through class name

You are on the right track use after() instead of insertAfter().

jQuery('.post-740')  .after($('.post-751'))  .after($('.post-746'))  .after($('.post-748'))  .after($('.post-744'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><div class="post-744">744 - 2</div><div class="post-740">740 - 1</div><div class="post-751">751 - 5</div><div class="post-746">746 - 4</div><div class="post-748">748 - 3</div>

Change div order based on their id using jquery

Use:

var asc=false;   
var sorted=$('div').sort(function(a,b){
    return (asc ==
           ($(a).data('sort') <  $(b).data('sort'))) ? 1 : -1;
});
asc = asc ? false : true;
$('body').html(sorted);

Working Demo

Change DIV order with jquery

Actually it's pretty simple:

$(".myItems").html($(".myItems .item").sort(function(){
    return Math.random()-0.5;
}));

That's it!
Enjoy.

Change div order with CSS depending on device-width

This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.

The solution takes into consideration all the constraints you listed:

Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.

Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.

.container div {    width: 100px;    height: 50px;    display: inline-block;}
.one { background: red; }.two { background: orange; }.three { background: yellow; }.four { background: green; }.five { background: blue; }
@media screen and (max-width: 531px) {    .container { display: flex; flex-flow: column; }    .five { order: 1; }    .four { order: 2;  }    .three { order: 3; }    .two { order: 4; }    .one { order: 5 }}

<div class="container">    <div class="one">I'm first</div>    <div class="two">I'm second</div>    <div class="three">I'm third</div>    <div class="four">I'm fourth</div>    <div class="five">I'm fifth</div></div>

How to set div's order by condition in Jquery /js?

This is a solution:

var array = [  {    "id": 1,    "name": "foo"  },  {    "id": 1,    "name": "foo"  },  {    "id": 2,    "name": "foo"  },  {    "id": 1,    "name": "foo"  }];
var lsts = [ [], [] ];$.each( array, function() {  lsts[ this.id - 1 ].push( this );} );var lst1 = lsts[ 0 ],  lst2 = lsts[ 1 ];for ( var i = 0, l = lst1.length, l2 = lst2.length; i < l || i < l2; i++ ) {  if ( i < l )    appendElement( lst1[ i ] );  if ( i < l2 )    appendElement( lst2[ i ] );}
function appendElement( obj ) {  $( '#bar' ).append( '<div class="icon' + obj.id + '">' + obj.name + '</div>' );}

.icon1 {  color: red;}
.icon2 {  color: pink;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar"><div>

Rearrange div order based on id name

Try this JSFiddle demo.

Note that we need a container for your divs to sort:

<div class="container">
    <div class="my_list" id="peter">
        <label class="name">Peter -
            <div id="peter_status"></div>
        </label>
    </div>
    <div class="my_list" id="sam">
        <label class="name">Sam -
            <div id="sam_status"></div>
        </label>
    </div>
    <div class="my_list" id="derek">
        <label class="name">Derek -
            <div id="derek_status"></div>
        </label>
    </div>
</div>

And this JS code does the trick by using the remove() and prepend() jQuery methods:

var divId = 'sam';
$('button.sort-divs').on('click', function () {
    var divHtml = $('#' + divId).html();
    $('#' + divId).remove();
    $('.container').prepend(divHtml);
});