Allow columns to be flipped for RTL content

For right to left locales the reading edge is on the other side of the
page. In reality this means that the most important content should be
against the right side of the page and the columns should be flipped.
This makes it easy to have all the columns on the page flipped by
adding a wrapping class to the page.

app/assets/stylesheets/helpers/_layouts.scss

@@ -10,18 +10,38 @@
 
   .column-quarter {
     @include grid-column( 1/4 );
+
+    .direction-rtl & {
+      @include grid-column( 1/4, $float: right );
+    }
   }
   .column-half {
     @include grid-column( 1/2 );
+
+    .direction-rtl & {
+      @include grid-column( 1/2, $float: right );
+    }
   }
   .column-three-quarters {
     @include grid-column( 3/4 );
+
+    .direction-rtl & {
+      @include grid-column( 3/4, $float: right );
+    }
   }
 
   .column-third {
     @include grid-column( 1/3 );
+
+    .direction-rtl & {
+      @include grid-column( 1/3, $float: right );
+    }
   }
   .column-two-thirds {
     @include grid-column( 2/3 );
+
+    .direction-rtl & {
+      @include grid-column( 2/3, $float: right );
+    }
   }
 }