update doc and Readme

1 files changed, 17 insertions, 8 deletions

diff --git a/index.html b/index.html
index 56553be..7784388 100644
--- a/index.html
+++ b/index.html
@@ -300,22 +300,31 @@
                 </div>
             </div>
             <div class="columns">
-                <div class="column col-2">
-                    <div class="bg-grey">col-2</div>
+                <div class="column col-12">
+                    <div class="bg-grey">col-12 (100%)</div>
                 </div>
-                <div class="column col-4">
-                    <div class="bg-grey">col-4</div>
+            </div>
+            <div class="columns">
+                <div class="column col-9">
+                    <div class="bg-grey">col-9 (75%)</div>
                 </div>
-                <div class="column col-4">
-                    <div class="bg-grey">col-4</div>
+            </div>
+            <div class="columns">
+                <div class="column col-6">
+                    <div class="bg-grey">col-6 (50%)</div>
                 </div>
-                <div class="column col-2">
-                    <div class="bg-grey">col-2</div>
+            </div>
+            <div class="columns">
+                <div class="column col-3">
+                    <div class="bg-grey">col-3 (25%)</div>
                 </div>
             </div>
             <section class="notes">
                 <p>Add the class <code class="label">columns</code> to a container. And add any element you want with classname <code class="label">column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code class="label">col-[1-12]</code>.</p>
             </section>
+            <section class="notes">
+                <p>When the width of browser viewport is less than 840px and more than 480px, the col-[1-11] will be 50% width to the parent elements.</p>
+            </section>
 
             <!-- layout example -->
 <pre class="code lang-html">