FlexBox demo

dabblet.css

/*
FlexBox demo
Browser support

Chrome any
Firefox any
Safari any
Opera 12.1+
IE 10+

iOS any
Android any
copy of http://css-tricks.com/using-flexbox/
*/
.page-wrap {
  display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

.main-content {
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 60%;                     /* No flex here, other cols take up remaining space */
  margin:0 15px;
  background: white;
}

.main-nav {
  order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex:1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background: #ccc;
}

.main-sidebar {
  order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background: #ccc;
}

.main-content,
.main-sidebar,
.main-nav {
  padding: 1em;
}

body {
  margin:0;
  padding:0;
  background: #79a693;
}
* {
  box-sizing: border-box;
}

h1, h2 {
  font: bold 2em Sans-Serif;
  margin: 0 0 1em 0;
}
h2 {
  font-size: 1.5em;
}
p {
  margin: 0 0 1em 0;
}

dabblet.html

<div class="page-wrap">
  
  <section class="main-content">
    <h1>Main Content</h1>
    <p><strong>I'm first in the source order.</strong></p>
    <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>
    <p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
  </section>
  
  <nav class="main-nav">
    <h2>Nav</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  
  <aside class="main-sidebar">
    <h2>Sidebar</h2>
    <p>I am a rather effortless column of equal height.</p>
  </aside>
    
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}