account for XL size tier in grid docs

docs/layout/grid.md

@@ -37,18 +37,22 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
         <th></th>
         <th>
           Extra small devices
-          <small>Phones (&lt;768px)</small>
+          <small>Portrait phones (&lt;???px)</small>
         </th>
         <th>
           Small devices
-          <small>Tablets (&ge;768px)</small>
+          <small>Landscape phones (&ge;???px)</small>
         </th>
         <th>
           Medium devices
-          <small>Desktops (&ge;992px)</small>
+          <small>Tablets (&ge;768px)</small>
         </th>
         <th>
           Large devices
+          <small>Desktops (&ge;992px)</small>
+        </th>
+        <th>
+          Extra large devices
           <small>Desktops (&ge;1200px)</small>
         </th>
       </tr>
@@ -57,11 +61,12 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
       <tr>
         <th class="text-nowrap" scope="row">Grid behavior</th>
         <td>Horizontal at all times</td>
-        <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
+        <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Container width</th>
         <td>None (auto)</td>
+        <td>???px</td>
         <td>750px</td>
         <td>970px</td>
         <td>1170px</td>
@@ -72,33 +77,35 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
         <td><code>.col-sm-</code></td>
         <td><code>.col-md-</code></td>
         <td><code>.col-lg-</code></td>
+        <td><code>.col-xl-</code></td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row"># of columns</th>
-        <td colspan="4">12</td>
+        <td colspan="5">12</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Column width</th>
         <td class="text-muted">Auto</td>
+        <td>~??px</td>
         <td>~62px</td>
         <td>~81px</td>
         <td>~97px</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Gutter width</th>
-        <td colspan="4">30px (15px on each side of a column)</td>
+        <td colspan="5">30px (15px on each side of a column)</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Nestable</th>
-        <td colspan="4">Yes</td>
+        <td colspan="5">Yes</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Offsets</th>
-        <td colspan="4">Yes</td>
+        <td colspan="5">Yes</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Column ordering</th>
-        <td colspan="4">Yes</td>
+        <td colspan="5">Yes</td>
       </tr>
     </tbody>
   </table>