feat: add hidden- and initial-order- modifiers (closes #1, #3) (#4)

README.md

@@ -9,11 +9,11 @@ Grid based on the `flex` display property and rem.
 - `.col-*` padding: .5rem.
 
 ### Breakpoints
-- `xs`: 0−36rem
-- `sm`: 36−48rem
-- `md`: 48−62rem
-- `lg`: 62−75rem
-- `xl`: 75rem+
+- `xs`: 0−575px
+- `sm`: 576px-767px
+- `md`: 768px−991px
+- `lg`: 992px−1199px
+- `xl`: 1200px+
 
 # Install
 ### yarn

docs/src/index.html

@@ -557,6 +557,7 @@ <h2>Reordering</h2>
         <p>Add classes to reorder columns.</p>
 
         <h3><code>.first-</code></h3>
+        <p>Forces a column to appear first.</p>
 
         <div class="row">
           <div class="col-xs-12">
@@ -604,6 +605,7 @@ <h3><code>.first-</code></h3>
 </code></pre>
 
         <h3><code>.last-</code></h3>
+        <p>Forces a column to appear last.</p>
 
         <div class="row">
           <div class="col-xs-12">
@@ -650,6 +652,53 @@ <h3><code>.last-</code></h3>
 &lt;/div>
 </code></pre>
 
+        <h3><code>.initial-order-</code></h3>
+        <p>Resets a column to its initial order.</p>
+
+        <div class="row">
+          <div class="col-xs-12">
+            <div class="box box-container">
+              <div class="row">
+                <div class="col-xs-2">
+                  <div class="box-first">1</div>
+                </div>
+                <div class="col-xs-2">
+                  <div class="box-first">2</div>
+                </div>
+                <div class="col-xs-2">
+                  <div class="box-first">3</div>
+                </div>
+                <div class="col-xs-2">
+                  <div class="box-first">4</div>
+                </div>
+                <div class="col-xs-2">
+                  <div class="box-first">5</div>
+                </div>
+                <div class="col-xs-2 first-xs initial-order-sm">
+                  <div class="box-nested">6</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <pre><code>&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;div class=&quot;box&quot;&gt;
+            1
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-2&quot;&gt;
+        &lt;div class=&quot;box&quot;&gt;
+            2
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-2 first-xs initial-order-sm&quot;&gt;
+        &lt;div class=&quot;box&quot;&gt;
+            3
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
       </section>
 
       <section class="page-section">
@@ -704,6 +753,56 @@ <h3><code>.reverse</code></h3>
 
       </section>
 
+      <section class="page-section">
+
+        <h2>Hiding</h2>
+        <p>Add one or more breakpoint modifiers to hide columns based on the viewport.</p>
+
+        <h3><code>.hidden-</code></h3>
+
+        <div class="row">
+          <div class="col-xs-12">
+            <div class="box box-container">
+              <div class="row">
+                <div class="col-xs"><div class="box-nested hidden-xs">xs</div></div>
+                <div class="col-xs"><div class="box-nested hidden-sm">sm</div></div>
+                <div class="col-xs"><div class="box-nested hidden-md">md</div></div>
+                <div class="col-xs"><div class="box-nested hidden-lg">lg</div></div>
+                <div class="col-xs"><div class="box-nested hidden-xl">xl</div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <pre><code>&lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs&quot;&gt;
+        &lt;div class=&quot;box hidden-xs&quot;&gt;
+            xs
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs&quot;&gt;
+        &lt;div class=&quot;box hidden-sm&quot;&gt;
+            sm
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs&quot;&gt;
+        &lt;div class=&quot;box hidden-md&quot;&gt;
+            md
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs&quot;&gt;
+        &lt;div class=&quot;box hidden-lg&quot;&gt;
+            lg
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs&quot;&gt;
+        &lt;div class=&quot;box hidden-xl&quot;&gt;
+            xl
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+      </section>      
+
       <footer class="page-footer">
         <div class="row">
           <div class="col-xs end">