diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md
index 2d30cd5c9..700e1a3ec 100644
--- a/docs/source/styles/flexbox/align-content.blade.md
+++ b/docs/source/styles/flexbox/align-content.blade.md
@@ -138,7 +138,7 @@ Use `.content-around` to distribute lines in a flex container such that there is
 
 ## Responsive
 
-To apply an align content utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:content-around` to an element would apply the `content-around` utility at medium screen sizes and above.
+To control the alignment of flex content at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
 
 For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
 
diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md
index 7160831dc..364213c11 100644
--- a/docs/source/styles/flexbox/align-items.blade.md
+++ b/docs/source/styles/flexbox/align-items.blade.md
@@ -6,15 +6,16 @@ category: "Flexbox"
 
 # Align Items
 
+<div class="text-xl text-slate-light">
+    Utilities for controlling how flex items are positioned along a container's cross axis.
+</div>
+
 <div class="subnav">
     <a class="subnav-link" href="#usage">Usage</a>
     <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
 </div>
 
-Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
-
-<h2>Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
+### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
 
 Use `.items-stretch` to stretch items to fill the flex container's cross axis:
 
@@ -26,7 +27,7 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis:
 </div>
 @endcomponent
 
-## Start
+### Start
 
 Use `.items-start` to align items to the start of the flex container's cross axis:
 
@@ -38,7 +39,7 @@ Use `.items-start` to align items to the start of the flex container's cross axi
 </div>
 @endcomponent
 
-## Center
+### Center
 
 Use `.items-center` to align items along the center of the flex container's cross axis:
 
@@ -50,7 +51,7 @@ Use `.items-center` to align items along the center of the flex container's cros
 </div>
 @endcomponent
 
-## End
+### End
 
 Use `.items-end` to align items to the end of the flex container's cross axis:
 
@@ -63,7 +64,7 @@ Use `.items-end` to align items to the end of the flex container's cross axis:
 @endcomponent
 
 
-## Baseline
+### Baseline
 
 Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
 
@@ -74,3 +75,52 @@ Use `.items-baseline` to align items along the flex container's cross axis such
     <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
 </div>
 @endcomponent
+
+## Responsive
+
+To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
+
+For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
+
+@component('_partials.responsive-code-sample')
+@slot('none')
+<div class="flex items-stretch bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+</div>
+@endslot
+@slot('sm')
+<div class="flex items-start bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+</div>
+@endslot
+@slot('md')
+<div class="flex items-center bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+</div>
+@endslot
+@slot('lg')
+<div class="flex items-end bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+</div>
+@endslot
+@slot('xl')
+<div class="flex items-baseline bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
+</div>
+@endslot
+@slot('code')
+<div class="none:items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline">
+    <!-- ... -->
+</div>
+@endslot
+@endcomponent