order

dabblet.css

/*
 * order
 * CSS3 flexbox order property
 * http://docs.webplatform.org/wiki/css/properties/flex-order
 */
 
.list {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  
}

.list div {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;
 
    background: #CCC;
    margin: 5px;
}

.list .third {
  -webkit-order: 2;
     -moz-order: 2;
      -ms-order: 2;
       -o-order: 2;
          order: 2;
}

.list .second {
  -webkit-order: 1;
     -moz-order: 1;
      -ms-order: 1;
       -o-order: 1;
          order: 1;
}

.list .first {
  -webkit-order: 3;
     -moz-order: 3;
      -ms-order: 3;
       -o-order: 3;
          order: 3;
}

dabblet.html

<div class="list">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}