Flex Ordering

These elements are dynamically reordered using the CSS Flex property.

by asemahle

HTML

<div id="flex">
    <div id="a">I CAME<br></div>
    <div id="b">I SAW<br></div>
    <div id="c">I CONQUERED<br></div>
</div>

CSS

#flex { 
  display: flex; 
  flex-direction: column
}
#flex > div {
  width: 100%;
  text-align: center;
}

#a { background-color: rgb(256,100,100) }
#b { background-color: rgb(100,256,100) }
#c { background-color: rgb(100,100,256) }

JavaScript

$(document).ready(function() {
  setInterval(reorder, 2000);

  function reorder() {
    var divs = $('#flex > div');
    for (var i = 0; i < divs.length; i++) {
      $(divs[i]).css("order", Math.floor(Math.random() * 1000));
    }
    return;
  }
});