diff --git a/site/content/docs/0.0/extend/approach.md b/site/content/docs/0.0/extend/approach.md
index f6624ed825..5b3571c5fa 100644
--- a/site/content/docs/0.0/extend/approach.md
+++ b/site/content/docs/0.0/extend/approach.md
@@ -29,11 +29,9 @@ We'll dive into each of these more throughout, but at a high level, here's what
 
 OUDS Web's responsive styles are built to be responsive, an approach that's often referred to as _mobile-first_. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component _must_ be entirely responsive in OUDS Web, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.
 
-<!--
 Across OUDS Web, you'll see this most clearly in our media queries. In most cases, we use `min-width` queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a `.d-none` applies from `min-width: 0` to infinity. On the other hand, a `.d-md-none` applies from the medium breakpoint and up.
 
 At times we'll use `max-width` when a component's inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.
--->
 
 ## Classes
 
diff --git a/site/content/docs/0.0/getting-started/contents.md b/site/content/docs/0.0/getting-started/contents.md
index 20581896a2..08749e56c0 100644
--- a/site/content/docs/0.0/getting-started/contents.md
+++ b/site/content/docs/0.0/getting-started/contents.md
@@ -85,7 +85,7 @@ OUDS Web includes a handful of options for including some or all of our compiled
 | --- | --- | --- | --- | --- |
 | `ouds-web.css`<br> `ouds-web.min.css`<br> `ouds-web.rtl.css`<br> `ouds-web.rtl.min.css` | Included | Included | Included | Included without Bootstrap utilities |
 | `ouds-web-bootstrap.css`<br> `ouds-web-bootstrap.min.css`<br> `ouds-web-bootstrap.rtl.css`<br> `ouds-web-bootstrap.rtl.min.css` | Included | Included | Included | Included with Bootstrap utilities |
-| `ouds-web-grid.css`<br> `ouds-web-grid.rtl.css`<br> `ouds-web-grid.min.css`<br> `ouds-web-grid.rtl.min.css` | <!--[Only grid system]({{< docsref "/layout/grid" >}})-->— | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
+| `ouds-web-grid.css`<br> `ouds-web-grid.rtl.css`<br> `ouds-web-grid.min.css`<br> `ouds-web-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
 | `ouds-web-utilities.css`<br> `ouds-web-utilities.rtl.css`<br> `ouds-web-utilities.min.css`<br> `ouds-web-utilities.rtl.min.css` | — | — | — | Included |
 | `ouds-web-reboot.css`<br> `ouds-web-reboot.rtl.css`<br> `ouds-web-reboot.min.css`<br> `ouds-web-reboot.rtl.min.css` | — | <!--[Only Reboot]({{< docsref "/content/reboot" >}})-->— | — | — |
 {{< /bs-table >}}
diff --git a/site/content/docs/0.0/helpers/position.md b/site/content/docs/0.0/helpers/position.md
index 939963716d..407e9cc7f3 100644
--- a/site/content/docs/0.0/helpers/position.md
+++ b/site/content/docs/0.0/helpers/position.md
@@ -32,17 +32,19 @@ Position an element at the top of the viewport, from edge to edge, but only afte
 <div class="sticky-top">...</div>
 ```
 
-<!--## Responsive sticky top
+## Responsive sticky top
 
 Responsive variations also exist for `.sticky-top` utility.
 
 ```html
+<div class="sticky-xs-top">Stick to the top on viewports sized XS (extra small) or wider</div>
 <div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
 <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
-<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
-```-->
+<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra large) or wider</div>
+<div class="sticky-2xl-top">Stick to the top on viewports sized 2XL (extra extra large) or wider</div>
+<div class="sticky-3xl-top">Stick to the top on viewports sized 3XL (extra extra extra large) or wider</div>
+```
 
 ## Sticky bottom
 
@@ -52,14 +54,16 @@ Position an element at the bottom of the viewport, from edge to edge, but only a
 <div class="sticky-bottom">...</div>
 ```
 
-<!--## Responsive sticky bottom
+## Responsive sticky bottom
 
 Responsive variations also exist for `.sticky-bottom` utility.
 
 ```html
+<div class="sticky-xs-bottom">Stick to the bottom on viewports sized XS (extra small) or wider</div>
 <div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
 <div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
-<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
-```-->
+<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra large) or wider</div>
+<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2XL (extra extra large) or wider</div>
+<div class="sticky-3xl-bottom">Stick to the bottom on viewports sized 3XL (extra extra extra large) or wider</div>
+```
diff --git a/site/content/docs/0.0/helpers/stretched-link.md b/site/content/docs/0.0/helpers/stretched-link.md
index 1f5563f1f0..dd84df5841 100644
--- a/site/content/docs/0.0/helpers/stretched-link.md
+++ b/site/content/docs/0.0/helpers/stretched-link.md
@@ -37,10 +37,10 @@ Most custom components do not have `position: relative` by default, so we need t
 </div>
 {{< /example >}}
 
-<!--{{< example >}}
+{{< example >}}
 <div class="row g-0 bg-body-secondary position-relative">
   <div class="col-md-6 mb-md-0 p-md-4">
-    { {< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
+    {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
   </div>
   <div class="col-md-6 p-4 ps-md-0">
     <h5 class="mt-0">Columns with stretched link</h5>
@@ -48,7 +48,7 @@ Most custom components do not have `position: relative` by default, so we need t
     <a href="#" class="stretched-link">Go somewhere</a>
   </div>
 </div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Identifying the containing block
 
diff --git a/site/content/docs/0.0/layout/css-grid.md b/site/content/docs/0.0/layout/css-grid.md
index eb46e9ffc6..650e9c6ca5 100644
--- a/site/content/docs/0.0/layout/css-grid.md
+++ b/site/content/docs/0.0/layout/css-grid.md
@@ -46,7 +46,7 @@ Compared to the default grid system:
 
 ### Three columns
 
-Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. <!--Add [responsive classes](#responsive) to change the layout by viewport size.-->
+Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
 
 {{< example class="bd-example-cssgrid" >}}
 <div class="grid text-center">
@@ -56,7 +56,7 @@ Three equal-width columns across all viewports and devices can be created by usi
 </div>
 {{< /example >}}
 
-<!--### Responsive
+### Responsive
 
 Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.
 
@@ -75,7 +75,7 @@ Compare that to this two column layout at all viewports.
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 </div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Wrapping
 
diff --git a/site/content/docs/0.0/utilities/api.md b/site/content/docs/0.0/utilities/api.md
index 6ba9e1fc23..097c62a301 100644
--- a/site/content/docs/0.0/utilities/api.md
+++ b/site/content/docs/0.0/utilities/api.md
@@ -25,9 +25,9 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
 | [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. |
 | [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
+| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
 | [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
 | `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
-<!--| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |-->
 <!--| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]({{< docsref "/getting-started/rfs" >}}). |-->
 {{< /bs-table >}}
 
@@ -258,7 +258,7 @@ Output:
 .opacity-100-hover:hover { opacity: 1 !important; }
 ```
 
-<!--### Responsive
+### Responsive
 
 Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]({{< docsref "/layout/breakpoints" >}}).
 
@@ -287,6 +287,14 @@ Output:
 .opacity-75 { opacity: .75 !important; }
 .opacity-100 { opacity: 1 !important; }
 
+@media (min-width: 390px) {
+  .opacity-sm-0 { opacity: 0 !important; }
+  .opacity-sm-25 { opacity: .25 !important; }
+  .opacity-sm-50 { opacity: .5 !important; }
+  .opacity-sm-75 { opacity: .75 !important; }
+  .opacity-sm-100 { opacity: 1 !important; }
+}
+
 @media (min-width: 480px) {
   .opacity-sm-0 { opacity: 0 !important; }
   .opacity-sm-25 { opacity: .25 !important; }
@@ -295,7 +303,7 @@ Output:
   .opacity-sm-100 { opacity: 1 !important; }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 736px) {
   .opacity-md-0 { opacity: 0 !important; }
   .opacity-md-25 { opacity: .25 !important; }
   .opacity-md-50 { opacity: .5 !important; }
@@ -311,7 +319,7 @@ Output:
   .opacity-lg-100 { opacity: 1 !important; }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1320px) {
   .opacity-xl-0 { opacity: 0 !important; }
   .opacity-xl-25 { opacity: .25 !important; }
   .opacity-xl-50 { opacity: .5 !important; }
@@ -319,14 +327,22 @@ Output:
   .opacity-xl-100 { opacity: 1 !important; }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 1640px) {
   .opacity-xxl-0 { opacity: 0 !important; }
   .opacity-xxl-25 { opacity: .25 !important; }
   .opacity-xxl-50 { opacity: .5 !important; }
   .opacity-xxl-75 { opacity: .75 !important; }
   .opacity-xxl-100 { opacity: 1 !important; }
 }
-```-->
+
+@media (min-width: 1880px) {
+  .opacity-xxl-0 { opacity: 0 !important; }
+  .opacity-xxl-25 { opacity: .25 !important; }
+  .opacity-xxl-50 { opacity: .5 !important; }
+  .opacity-xxl-75 { opacity: .75 !important; }
+  .opacity-xxl-100 { opacity: 1 !important; }
+}
+```
 
 ### Print
 
diff --git a/site/content/docs/0.0/utilities/display.md b/site/content/docs/0.0/utilities/display.md
index b5b6920c2e..2f494cfd5c 100644
--- a/site/content/docs/0.0/utilities/display.md
+++ b/site/content/docs/0.0/utilities/display.md
@@ -10,16 +10,16 @@ toc: true
 
 ## How it works
 
-Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our <!--responsive -->display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
+Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
 
 ## Notation
 
-<!--Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.-->
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `2xs` to `3xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-<!--As such, t-->The classes are named using the format:
+As such, the classes are named using the format:
 
-- `.d-{value}`<!-- for `xs`-->
-<!--- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.-->
+- `.d-{value}` for `2xs`
+- `.d-{breakpoint}-{value}` for `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, and `3xl`.
 
 Where *value* is one of:
 
@@ -37,7 +37,7 @@ Where *value* is one of:
 
 The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
 
-<!--The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.-->
+The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, `2xl`, and `3xl` screens.
 
 <!--## Examples
 
@@ -53,35 +53,39 @@ The display values can be altered by changing the `display` values defined in `$
 
 ## Hiding elements
 
-<!--For faster mobile-friendly development, use responsive-->Use display classes for showing and hiding elements<!-- by device-->.<!-- Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.-->
+For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
 
-To hide elements simply use the `.d-none` class<!-- or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation-->.
+To hide elements simply use the `.d-none` class or one of the `.d-{xs,sm,md,lg,xl,2xl,3xl}-none` classes for any responsive screen variation.
 
-<!--To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.-->
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-2xl-none` will hide the element for all screen sizes except on medium and large devices.
 
 {{< bs-table >}}
 | Screen size | Class |
 | --- | --- |
 | Hidden on all | `.d-none` |
 | Visible on all | `.d-block` |
-<!--| Hidden only on xs | `.d-none .d-sm-block` |
+| Hidden only on 2xs | `.d-none .d-xs-block` |
+| Hidden only on xs | `.d-xs-none .d-sm-block` |
 | Hidden only on sm | `.d-sm-none .d-md-block` |
 | Hidden only on md | `.d-md-none .d-lg-block` |
 | Hidden only on lg | `.d-lg-none .d-xl-block` |
-| Hidden only on xl | `.d-xl-none .d-xxl-block` |
-| Hidden only on xxl | `.d-xxl-none` |-->
-<!--| Visible only on xs | `.d-block .d-sm-none` |
+| Hidden only on xl | `.d-xl-none .d-2xl-block` |
+| Hidden only on 2xl | `.d-2xl-none .d-3xl-block` |
+| Hidden only on 3xl | `.d-2xl-none .d-3xl-block` |
+| Visible only on 2xs | `.d-block .d-xs-none` |
+| Visible only on xs | `.d-none .d-xs-block .d-sm-none` |
 | Visible only on sm | `.d-none .d-sm-block .d-md-none` |
 | Visible only on md | `.d-none .d-md-block .d-lg-none` |
 | Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
-| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
-| Visible only on xxl | `.d-none .d-xxl-block` |-->
+| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
+| Visible only on 2xl | `.d-none .d-2xl-block .d-3xl-none` |
+| Visible only on 3xl | `.d-none .d-3xl-block` |-->
 {{< /bs-table >}}
 
-<!--{{< example >}}
+{{< example >}}
 <div class="d-lg-none">hide on lg and wider screens</div>
 <div class="d-none d-lg-block">hide on screens smaller than lg</div>
-{{< /example >}}-->
+{{< /example >}}
 
 ## Display in print
 
@@ -104,7 +108,7 @@ The print and display classes can be combined.
 {{< example >}}
 <div class="d-print-none">Screen Only (Hide on print only)</div>
 <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
-<!--<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>-->
+<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
 {{< /example >}}
 
 ## CSS
diff --git a/site/content/docs/0.0/utilities/flex.md b/site/content/docs/0.0/utilities/flex.md
index 4c4dc9cbf9..91405319cd 100644
--- a/site/content/docs/0.0/utilities/flex.md
+++ b/site/content/docs/0.0/utilities/flex.md
@@ -20,8 +20,8 @@ Apply `display` utilities to create a flexbox container and transform **direct c
 <div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
 {{< /example >}}
 
-<!--Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
-
+Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
+<!-- TODO: See if the responsive classes in here should be hidden in a details/summary or not -->
 {{< markdown >}}
 {{< flex.inline >}}
 {{- range $.Site.Data.breakpoints }}
@@ -29,7 +29,7 @@ Apply `display` utilities to create a flexbox container and transform **direct c
 - `.d{{ .abbr }}-inline-flex`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Direction
 
@@ -65,7 +65,7 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to st
 </div>
 {{< /example >}}
 
-<!--Responsive variations also exist for `flex-direction`.
+Responsive variations also exist for `flex-direction`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -76,7 +76,7 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to st
 - `.flex{{ .abbr }}-column-reverse`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Justify content
 
@@ -124,7 +124,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
 <div class="d-flex justify-content-evenly">...</div>
 ```
 
-<!--Responsive variations also exist for `justify-content`.
+Responsive variations also exist for `justify-content`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -137,7 +137,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
 - `.justify-content{{ .abbr }}-evenly`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Align items
 
@@ -179,7 +179,7 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
 <div class="d-flex align-items-stretch">...</div>
 ```
 
-<!--Responsive variations also exist for `align-items`.
+Responsive variations also exist for `align-items`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -191,7 +191,7 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
 - `.align-items{{ .abbr }}-stretch`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Align self
 
@@ -233,7 +233,7 @@ Use `align-self` utilities on flexbox items to individually change their alignme
 <div class="align-self-stretch">Aligned flex item</div>
 ```
 
-<!--Responsive variations also exist for `align-self`.
+Responsive variations also exist for `align-self`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -245,7 +245,7 @@ Use `align-self` utilities on flexbox items to individually change their alignme
 - `.align-self{{ .abbr }}-stretch`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Fill
 
@@ -259,7 +259,7 @@ Use the `.flex-fill` class on a series of sibling elements to force them into wi
 </div>
 {{< /example >}}
 
-<!--Responsive variations also exist for `flex-fill`.
+Responsive variations also exist for `flex-fill`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -267,7 +267,7 @@ Use the `.flex-fill` class on a series of sibling elements to force them into wi
 - `.flex{{ .abbr }}-fill`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Grow and shrink
 
@@ -290,7 +290,7 @@ Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if nece
 </div>
 {{< /example >}}
 
-<!--Responsive variations also exist for `flex-grow` and `flex-shrink`.
+Responsive variations also exist for `flex-grow` and `flex-shrink`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -299,7 +299,7 @@ Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if nece
 - `.flex{{ .abbr }}-{grow|shrink}-1`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Auto margins
 
@@ -414,7 +414,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 ```
 
 
-<!--Responsive variations also exist for `flex-wrap`.
+Responsive variations also exist for `flex-wrap`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -424,7 +424,7 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 - `.flex{{ .abbr }}-wrap-reverse`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Order
 
@@ -438,7 +438,7 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
 </div>
 {{< /example >}}
 
-<!--Responsive variations also exist for `order`.
+Responsive variations also exist for `order`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -460,7 +460,7 @@ Additionally there are also responsive `.order-first` and `.order-last` classes
 {{- end -}}
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Align content
 
@@ -614,7 +614,7 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 <div class="d-flex align-content-stretch flex-wrap">...</div>
 ```
 
-<!--Responsive variations also exist for `align-content`.
+Responsive variations also exist for `align-content`.
 
 {{< markdown >}}
 {{< flex.inline >}}
@@ -627,7 +627,7 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 - `.align-content{{ .abbr }}-stretch`
 {{- end -}}
 {{< /flex.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## Media object
 
diff --git a/site/content/docs/0.0/utilities/float.md b/site/content/docs/0.0/utilities/float.md
index ed8baa0aa9..2028bee5b2 100644
--- a/site/content/docs/0.0/utilities/float.md
+++ b/site/content/docs/0.0/utilities/float.md
@@ -20,16 +20,18 @@ These utility classes float an element to the left or right, or disable floating
 
 Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats.
 
-<!--## Responsive
+## Responsive
 
 Responsive variations also exist for each `float` value.
 
 {{< example >}}
+<div class="float-xs-end">Float end on viewports sized XS (extra small) or wider</div><br>
 <div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
 <div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
 <div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
 <div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
-<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>
+<div class="float-2xl-end">Float end on viewports sized 2XL (extra extra large) or wider</div><br>
+<div class="float-3xl-end">Float end on viewports sized 3XL (extra extra extra large) or wider</div><br>
 {{< /example >}}
 
 Here are all the support classes:
@@ -42,7 +44,7 @@ Here are all the support classes:
 - `.float{{ .abbr }}-none`
 {{- end -}}
 {{< /float.inline >}}
-{{< /markdown >}}-->
+{{< /markdown >}}
 
 ## CSS
 
diff --git a/site/content/docs/0.0/utilities/object-fit.md b/site/content/docs/0.0/utilities/object-fit.md
index daa13b29cd..ed0272a23b 100644
--- a/site/content/docs/0.0/utilities/object-fit.md
+++ b/site/content/docs/0.0/utilities/object-fit.md
@@ -10,7 +10,7 @@ toc: true
 
 ## How it works
 
-Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our <!--responsive -->`object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
+Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
 
 Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values:
 
@@ -32,17 +32,19 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m
 {{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}}
 {{< /example >}}
 
-<!--## Responsive
+## Responsive
 
-Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
+Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `xs`, `sm`, `md`, `lg`, `xl`, `2xl` and `3xl`. Classes can be combined for various effects as you need.
 
 {{< example class="d-flex overflow-auto" >}}
+{{< placeholder width="140" height="80" class="object-fit-xs-contain border" text="Contain on xs" markup="img" color="#333" background="#bbb" >}}
 {{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="#333" background="#bbb" >}}
 {{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="#333" background="#bbb" >}}
 {{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="#333" background="#bbb" >}}
 {{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="#333" background="#bbb" >}}
-{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="#333" background="#bbb" >}}
-{{< /example >}}-->
+{{< placeholder width="140" height="80" class="object-fit-2xl-contain border" text="Contain on 2xl" markup="img" color="#333" background="#bbb" >}}
+{{< placeholder width="140" height="80" class="object-fit-3xl-contain border" text="Contain on 3xl" markup="img" color="#333" background="#bbb" >}}
+{{< /example >}}
 
 ## Video