Build container and table-mobile infixes with breakpoint-infix() (#3026)

core/scss/bootstrap/_containers.scss

@@ -14,7 +14,7 @@
 
   // Responsive containers that are 100% wide until a breakpoint
   @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
+    .container#{breakpoint-infix($breakpoint, $grid-breakpoints)} {
       @extend .container-fluid;
     }
 

core/scss/ui/_tables.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use '../config' as *;
 
 .table {
@@ -69,9 +71,14 @@
   max-width: 1px;
 }
 
+// Generate a series of `.table-mobile-*` classes for configuring the screen
+// size below which the table stacks into rows. Mirrors `.table-responsive-*`:
+// the infix names the breakpoint the layout applies *below*.
 .table-mobile {
-  @each $breakpoint, $breakpoint-max-widthin in $grid-breakpoints {
-    &#{breakpoint-infix($breakpoint)} {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
         display: block;