Diagnosing Bootstrap Grid Column Ordering Issues with Push/Pull Classes

Recognizable Condition

Columns that should remain side-by-side at a specific breakpoint instead drop to a new line, or appear in the wrong horizontal order. For example, a left column that should stay beside a right column on medium (≥768px) screens jumps below it when the browser width is resized to that range.

Cause/Diagnostic Table

Possible Cause	What to Look For
Missing or incorrect .push-*/.pull-* classes	Column elements lack the expected modifier for the breakpoint, or use an incorrect value (e.g., .push-md-2 when .push-md-4 is required).
Conflicting custom CSS	Rules setting width, float, display, or flex properties on .col-* elements, overriding Bootstrap's flexbox grid.
Outdated Bootstrap version	Push/pull syntax existed in Bootstrap 4.x but was replaced by .offset-* in Bootstrap 5; using v4 classes on v5 produces no effect.
Improper row nesting	A .col-* element is not wrapped by a .row, or a .row is missing its parent .container, breaking the flex context.

Ordered Checks

1. Verify HTML Hierarchy: Ensure the markup follows .container > .row > .col-*. Use browser DevTools to select a column and verify each parent has the expected class.
2. Inspect Breakpoint Classes: In the Elements pane, check if the breakpoint-specific push/pull class (e.g., .push-md-2) is present. If the class is missing or the number is incorrect, the column will not shift.
3. Scan for CSS Overrides: In the Styles pane, filter for the column's class. Look for user-defined rules setting width, float, display, or flex-* properties. Temporarily disable these rules to see if the layout corrects itself.
4. Confirm Bootstrap Version: In the browser Console, run:

   window.bootstrap ? window.bootstrap.VERSION : 'unknown'

   Alternatively, inspect the CSS <link> href for a version number (e.g., bootstrap/4.6.2/css/bootstrap.min.css). Compare this version with the syntax used in your code.
5. Live Toggle Test: Manually add a temporary class like .push-md-2 to the element via DevTools to see if the column shifts as expected.

Fixes Tied to Findings

• Missing/Incorrect Classes: Add the correct class for the breakpoint. If using Bootstrap 5, replace push/pull with the .offset-md-* equivalent.

  <!-- Bootstrap 4 -->
  <div class="col-md-6 push-md-2">...</div>
  
  <!-- Bootstrap 5 equivalent -->
  <div class="col-md-6 offset-md-2">...</div>

• Conflicting Custom CSS: Remove the offending rule or increase its specificity. Avoid using !important unless absolutely necessary. Reload the page to verify the fix.
• Version Mismatch: If using Bootstrap 4 classes on a v5 installation, migrate the layout to use .offset-* classes. Update your CDN or package manager reference if a downgrade is required.
• Improper Nesting: Wrap columns in a <div class="row">, which must be inside a <div class="container"> or <div class="container-fluid">.

Escalation Criteria

If the layout persists in misbehaving after the above checks:

• Audit third-party Bootstrap plugins or theme stylesheets that may alter flex behavior.
• Recompile custom Sass with default Bootstrap variables to isolate whether custom variable overrides are the source of the conflict.
• Consult community forums or the official Bootstrap repository with a minimal reproducible example including the HTML snippet, CSS overrides, and version number.