Restore grid offset classes

Fixes #23360 by restoring just the offset class generation to our grid
framework mixins. Also restores the `make-col-offset` mixin.

Docs have been restored to illustrate this behavior and merged with the
newer margin utilities examples.

docs/4.0/layout/grid.md

@@ -493,6 +493,22 @@ With the handful of grid tiers available, you're bound to run into issues where,
 {% endexample %}
 </div>
 
+In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/).
+
+<div class="bd-example-row"> 
+{% example html %} 
+<div class="row"> 
+ <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> 
+ <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> 
+</div> 
+
+<div class="row"> 
+ <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div> 
+ <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 offset-lg-0</div> 
+</div> 
+{% endexample %} 
+</div>
+
 ## Reordering
 
 ### Flex order
@@ -519,7 +535,31 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
 
 ### Offsetting columns
 
-With the move to flexbox in v4, we no longer have v3's style of offset classes. Instead, use margin utilities like `.mr-auto` to force sibling columns away from one another.
+You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
+
+#### Offset classes
+
+Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="row">
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
+</div>
+<div class="row">
+ <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+ <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+</div>
+<div class="row">
+ <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
+</div>
+{% endexample %}
+</div>
+
+#### Margin utilities
+
+With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
 
 <div class="bd-example-row">
 {% example html %}
@@ -604,6 +644,9 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 // Make the element grid-ready (applying everything but the width)
 @include make-col-ready();
 @include make-col($size, $columns: $grid-columns);
+
+// Get fancy by offsetting, or changing the sort order 
+@include make-col-offset($size, $columns: $grid-columns);
 {% endhighlight %}
 
 ### Example usage
@@ -684,4 +727,4 @@ $container-max-widths: (
 );
 {% endhighlight %}
 
-When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
+When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.

scss/mixins/_grid-framework.scss

@@ -51,6 +51,15 @@
  order: $i;
  }
  }
+
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns)
+ }
+ }
+ }
  }
  }
 }

scss/mixins/_grid.scss

@@ -45,3 +45,7 @@
  // do not appear to require this.
  max-width: percentage($size / $columns);
 }
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+ margin-left: percentage($size / $columns);
+}