A Pen by hudakdidit.

index.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>

Merging-Flexbox-Syntaxes.markdown

Merging Flexbox Syntaxes

Old and new, living together.

A Pen by hudakdidit on CodePen.

License.

script.js

/* 
Browser support

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

iOS any
Android any
*/

style.scss

@import "compass";
@mixin media($type) {

  @if $type == mobile {

      @media only screen and (max-width:849px) {
          @content;
      }

  }
  

  @if $type == tablet {

      @media only screen and (min-width:850px)  {
          @content;
      }

  }
  
  @if $type == desktop {

      @media only screen and (min-width:1000px) {
          @content;
      }

  }

  @if $type == tallerscreen {

      @media only screen and (min-height:800px) {
          @content;
      }

  }

  @if $type == tallscreen {

      @media only screen and (min-height:650px) {
          @content;
      }

  }

  @if $type == shortscreen {

      @media only screen and (max-height:649px) {
          @content;
      }

  }

   @if $type == largescreen {

      @media only screen and (min-width:1250px) {
          @content;
      }

  }
   @if $type == retina {
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
          @content;
      }
      

  }
  

}

.page-wrap {
  @include media(tablet){
  display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
  display: -ms-flexbox;           /* TWEENER - IE 10 */
  display: -webkit-flex;          /* NEW - Chrome */
  display: flex; 
  }/* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

.main-content {
   
  width: 100%;/* NEW, Spec - Opera 12.1, Firefox 20+ */
    @include media(tablet){
  width: 60%;     
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;
  }/* No flex here, other cols take up remaining space */
  
  -moz-box-flex: 1;               /* Without this, Firefox 19- expands to widest paragraph, overrides width */
  
  background: white;
}

.main-nav {
                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  width: 100%;
  /* OLD - Firefox 19- */
    @include media(tablet){
  width: 20%;   
    -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  -ms-flex-order: 1;              /* TWEENER - IE 10 */
  -webkit-order: 1;               /* NEW - Chrome */
  order: 1;  
  }/* For old syntax, otherwise collapses. */
  -webkit-flex: 1;                /* Chrome */
  -ms-flex: 1;                    /* IE 10 */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  background: darken(yellow, 5%);
  color: white;
  a {
    color: white;
  }
}

.main-sidebar {
                      /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  
  width: 100%;/* Firefox 19- */
  @include media(tablet){
    width: 20%;   
     -webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  -ms-flex-order: 3;              /* TWEENER - IE 10 */
  -webkit-order: 3;               /* NEW - Chrome */
  order: 3;  
  }/* For OLD syntax, otherwise collapses. */
  -ms-flex: 1;                    /* TWEENER - IE 10 */
  -webkit-flex: 1;                /* NEW - Chrome */
  flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
  
  background: darken(yellow, 10%);
  color: yellow;
}

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

body {
  padding: 2em;
  background: yellow;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  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;
}

@media all and (max-width: 800px) {
  
}