Update grid examples

examples/grid.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <!-- Site Properities -->
-  <title>Fixed Menu Example - Semantic</title>
+  <title>Grid Example - Semantic</title>
 
   <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
@@ -118,6 +118,24 @@
         </div>
       </div>
 
+      <h3>Specifying Row Width</h3>
+      <p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
+      <div class="ui three column grid">
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+        <div class="column">column</div>
+      </div>
+
+      <h3>Specifying Column Width</h3>
+      <p>You can also specify column widths for each column individually</p>
+      <div class="ui three column grid">
+        <div class="four wide column">four wide column</div>
+        <div class="eight wide column">eight wide column</div>
+        <div class="four wide column">four wide column</div>
+      </div>
 
       <h3>Special Variations</h3>
       <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
@@ -193,7 +211,7 @@
       <h1 class="ui inverted block header">Adjusting Grids</h1>
 
 
-      <h3>Centering Content</h3>
+      <h3 class="first">Centering Content</h3>
       <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
       </p>
       <div class="ui two column centered grid">
@@ -261,17 +279,6 @@
         </div>
       </div>
 
-      <h3 class="first">Specifying Column Count</h3>
-      <p>Specifying a column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
-      <div class="ui three column grid">
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-        <div class="column">column</div>
-      </div>
-
       <h3>Equal Width Columns</h3>
       <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p>
       <div class="ui equal width grid">
@@ -288,16 +295,10 @@
         </div>
       </div>
 
-      <h3>Individual Column Width</h3>
-      <div class="ui three column grid">
-        <div class="four wide column">four wide column</div>
-        <div class="eight wide column">eight wide column</div>
-        <div class="four wide column">four wide column</div>
-      </div>
 
       <h1>Responsive Patterns</h1>
 
-      <h3>Doubling</h3>
+      <h3 class="first">Doubling</h3>
       <p>You can set columns to double in width at each device jump</p>
       <div class="ui five column doubling grid">
         <div class="column">column</div>