diff --git a/docs/source/styles/flexbox/display.blade.md b/docs/source/styles/flexbox/display.blade.md
index d1aec0e23..ee1f49096 100644
--- a/docs/source/styles/flexbox/display.blade.md
+++ b/docs/source/styles/flexbox/display.blade.md
@@ -6,15 +6,15 @@ category: "Flexbox"
 
 # Display
 
-<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 class="text-xl text-slate-light">
+    Utilities for creating flex containers.
 </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.
+<div class="subnav">
+    <a class="subnav-link" href="#responsive">Responsive</a>
+</div>
 
-## Flex
+### Flex
 
 Use `.flex` to create a block-level flex container:
 
@@ -26,7 +26,7 @@ Use `.flex` to create a block-level flex container:
 </div>
 @endcomponent
 
-## Inline flex
+### Inline flex
 
 Use `.inline-flex` to create an inline flex container:
 
@@ -37,3 +37,52 @@ Use `.inline-flex` to create an inline flex container:
     <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
+
+## Responsive
+
+To control the display property of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` 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 bg-smoke-light">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('sm')
+<div class="inline-flex bg-smoke-light">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('md')
+<div class="block bg-smoke-light">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('lg')
+<div class="hidden bg-smoke-light">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('xl')
+<div class="flex bg-smoke-light">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('code')
+<div class="none:flex sm:inline-flex md:block lg:hidden xl:flex ...">
+    <!-- ... -->
+</div>
+@endslot
+@endcomponent