Add .row-reverse to reverse direction

dist/chota.css

@@ -167,6 +167,12 @@ iframe {
     margin-left: calc(var(--grid-gutter) / -2);
     margin-right: calc(var(--grid-gutter) / -2);
 }
+.row-reverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+}
 .col {
     -webkit-box-flex: 1;
         -ms-flex: 1;

docs/_includes/grid.html

@@ -165,4 +165,33 @@
 {% endhighlight %}
 <p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is one of the <a href="#utilities">utility</a> class.</p>
 
+
+<hr>
+<h5>Reverse Direction</h5>
+<p>Add <code>.row-reverse</code> to the <code>.row</code> to reverse the column direction. </p>
+<div class="row row-reverse">
+  <div class="col-6">
+    <div class="card is-center">.col-6</div>
+  </div>
+  <div class="col-3">
+    <div class="card is-center">.col-3</div>
+  </div>
+  <div class="col-3">
+    <div class="card is-center">.col-3</div>
+  </div>
+</div>
+{% highlight html %}
+<div class="row row-reverse">
+  <div class="col-6">
+    <div class="card is-center">.col-6</div>
+  </div>
+  <div class="col-3">
+    <div class="card is-center">.col-3</div>
+  </div>
+  <div class="col-3">
+    <div class="card is-center">.col-3</div>
+  </div>
+</div>
+{% endhighlight %}
+
 </section>

src/_grid.css

@@ -13,6 +13,10 @@
     margin-right: calc(var(--grid-gutter) / -2);
 }
 
+.row-reverse {
+  flex-direction: row-reverse;
+}
+
 .col {
     flex: 1;
 }