Use Sass custom mixins for grid

assets/sass/_header.sass

@@ -1,9 +1,37 @@
 @import variables
+@import mixins
 
 header
+  @include grid(100)
   margin-top: 5px
   margin-bottom: 5px
   border-bottom: 1px solid #dedede
+
+  .menus-container
+    @include grid_width(10/100)
+    @include md-device
+      @include grid_width(15/100)
+    @include sm-device
+      @include grid_width(65/100)
+      order: 2
+
+  .board-selector-container
+    @include grid_width(15/100)
+    @include md-device
+      @include grid_width(20/100)
+    @include sm-device
+      @include grid_width(35/100)
+      order: 1
+      margin-bottom: 5px
+
+  .title-container
+    @include grid_width(75/100)
+    @include md-device
+      @include grid_width(65/100)
+    @include sm-device
+      @include grid_width(1)
+      order: 3
+
   h1
     font-size: size('title')
     .tooltip

assets/sass/_mixins.sass

@@ -0,0 +1,25 @@
+@import variables
+
+@mixin xs-device
+  @media (max-width: #{$xs-device-width})
+    @content
+
+@mixin sm-device
+  @media (max-width: #{$sm-device-width})
+    @content
+
+@mixin md-device
+  @media (min-width: #{$sm-device-width}) and (max-width: #{$md-device-width})
+    @content
+
+@mixin grid($columns: 0)
+  box-sizing: border-box
+  display: flex
+  flex-wrap: wrap
+  > *
+    box-sizing: border-box
+  > *
+    width: (1/$columns) * 100%
+
+@mixin grid_width($width)
+  width: $width * 100%

assets/sass/_variables.sass

@@ -1,3 +1,7 @@
+$xs-device-width: 480px
+$sm-device-width: 768px
+$md-device-width: 1150px
+
 $colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48)
 $link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
 $background-colors: ('primary': #fbfbfb, 'light': #fcfcfc)