From 28b9bc068f502f01db1209b14133e492de0f7b8e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 15 Jul 2018 22:51:47 -0700
Subject: [PATCH] Improve responsive table docs

- Splits the examples with code snippets
- Adds note about possible broken visuals

Closes #25813
---
 site/docs/4.1/content/tables.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/site/docs/4.1/content/tables.md b/site/docs/4.1/content/tables.md
index e3303666b3..8799d47f25 100644
--- a/site/docs/4.1/content/tables.md
+++ b/site/docs/4.1/content/tables.md
@@ -764,8 +764,10 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 
 Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
 
-<div class="bd-example">
+**These tables may appear broken until their responsive styles apply at specific viewport widths.**
+
 {% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
+<div class="bd-example">
 <div class="table-responsive{{ bp.abbr }}">
   <table class="table">
     <thead>
@@ -818,15 +820,12 @@ Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables u
     </tbody>
   </table>
 </div>
-{% endunless %}{% endfor %}
 </div>
-
 {% highlight html %}
-{% for bp in site.data.breakpoints %}{% unless bp.breakpoint == "xs" %}
 <div class="table-responsive{{ bp.abbr }}">
   <table class="table">
     ...
   </table>
 </div>
-{% endunless %}{% endfor %}
 {% endhighlight %}
+{% endunless %}{% endfor %}