feat(grid): add column order classes

packages/grid/src/styles/column.module.css

@@ -137,6 +137,55 @@
   transform: translateX(100%);
 }
 
+/* Small Order Classes */
+.sm-order-1 {
+  order: 1;
+}
+
+.sm-order-2 {
+  order: 2;
+}
+
+.sm-order-3 {
+  order: 3;
+}
+
+.sm-order-4 {
+  order: 4;
+}
+
+.sm-order-5 {
+  order: 5;
+}
+
+.sm-order-6 {
+  order: 6;
+}
+
+.sm-order-7 {
+  order: 7;
+}
+
+.sm-order-8 {
+  order: 8;
+}
+
+.sm-order-9 {
+  order: 9;
+}
+
+.sm-order-10 {
+  order: 10;
+}
+
+.sm-order-11 {
+  order: 11;
+}
+
+.sm-order-12 {
+  order: 12;
+}
+
 @media (min-width: 768px) {
   /* Medium Width Classes */
   .md-1 {
@@ -253,6 +302,55 @@
   .md-offset-12 {
     transform: translateX(100%);
   }
+
+  /* Medium Order Classes */
+  .md-order-1 {
+    order: 1;
+  }
+
+  .md-order-2 {
+    order: 2;
+  }
+
+  .md-order-3 {
+    order: 3;
+  }
+
+  .md-order-4 {
+    order: 4;
+  }
+
+  .md-order-5 {
+    order: 5;
+  }
+
+  .md-order-6 {
+    order: 6;
+  }
+
+  .md-order-7 {
+    order: 7;
+  }
+
+  .md-order-8 {
+    order: 8;
+  }
+
+  .md-order-9 {
+    order: 9;
+  }
+
+  .md-order-10 {
+    order: 10;
+  }
+
+  .md-order-11 {
+    order: 11;
+  }
+
+  .md-order-12 {
+    order: 12;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -371,6 +469,55 @@
   .lg-offset-12 {
     transform: translateX(100%);
   }
+
+  /* Large Order Classes */
+  .lg-order-1 {
+    order: 1;
+  }
+
+  .lg-order-2 {
+    order: 2;
+  }
+
+  .lg-order-3 {
+    order: 3;
+  }
+
+  .lg-order-4 {
+    order: 4;
+  }
+
+  .lg-order-5 {
+    order: 5;
+  }
+
+  .lg-order-6 {
+    order: 6;
+  }
+
+  .lg-order-7 {
+    order: 7;
+  }
+
+  .lg-order-8 {
+    order: 8;
+  }
+
+  .lg-order-9 {
+    order: 9;
+  }
+
+  .lg-order-10 {
+    order: 10;
+  }
+
+  .lg-order-11 {
+    order: 11;
+  }
+
+  .lg-order-12 {
+    order: 12;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -489,4 +636,53 @@
   .xl-offset-12 {
     transform: translateX(100%);
   }
+
+  /* Extra Large Order Classes */
+  .xl-order-1 {
+    order: 1;
+  }
+
+  .xl-order-2 {
+    order: 2;
+  }
+
+  .xl-order-3 {
+    order: 3;
+  }
+
+  .xl-order-4 {
+    order: 4;
+  }
+
+  .xl-order-5 {
+    order: 5;
+  }
+
+  .xl-order-6 {
+    order: 6;
+  }
+
+  .xl-order-7 {
+    order: 7;
+  }
+
+  .xl-order-8 {
+    order: 8;
+  }
+
+  .xl-order-9 {
+    order: 9;
+  }
+
+  .xl-order-10 {
+    order: 10;
+  }
+
+  .xl-order-11 {
+    order: 11;
+  }
+
+  .xl-order-12 {
+    order: 12;
+  }
 }