使用Bootstrap调整师资页面Div定位并保持响应式布局

Hey there! Let's sort out this layout issue for your faculties page—keeping responsiveness intact while moving Div A to position B is totally doable with Bootstrap's built-in tools. First, let's clear up a tiny typo in your existing code: col-xm-5 should be col-xs-5 (for Bootstrap 3) or just col-5 (for Bootstrap 4/5, since xs is the default breakpoint now).

Since you didn't specify exactly what "position B" is, I'll cover the two most common scenarios: swapping column order across breakpoints, and repositioning an item within the same row.

Scenario 1: Swap Column Order Responsively #

If you want Div A to appear in a different position on larger screens (e.g., desktop) but stay in its original place on mobile, use Bootstrap's order classes (for v4/v5) or push/pull classes (for v3).

For Bootstrap 4/5: #

Use the .order-{breakpoint}-{number} classes to control flex item order. Numbers start at 1, and lower numbers mean the item appears earlier. Here's how to swap your two columns on sm and larger screens:

<div class="row d-flex justify-content-center align-items-start align-content-around">
  <!-- Div A moves to Div B's position on sm+ screens -->
  <div class="item text-light wow fadeInUp bg-dark col-sm-5 col-5 order-sm-2">Div A</div>
  <div class="item text-light wow fadeInUp bg-dark col-sm-5 col-5 order-sm-1">Div B</div>
</div>

On mobile (xs breakpoint), the columns follow their DOM order. On sm and above, order-sm-2 pushes Div A to the second spot, while order-sm-1 pulls Div B to the first.

For Bootstrap 3: #

Use .col-{breakpoint}-push-{size} and .col-{breakpoint}-pull-{size} to shift columns horizontally:

<div class="row">
  <div class="item text-light wow fadeInUp bg-dark col-sm-5 col-xs-5 col-sm-push-5">Div A</div>
  <div class="item text-light wow fadeInUp bg-dark col-sm-5 col-xs-5 col-sm-pull-5">Div B</div>
</div>

col-sm-push-5 moves Div A 5 columns to the right, and col-sm-pull-5 moves Div B 5 columns to the left—swapping their positions on sm screens, while keeping mobile layout intact.

Scenario 2: Reposition Within the Same Row (Fixed Order Across All Breakpoints) #

If you need Div A to be in position B on all screen sizes, simply rearrange the DOM order of your <div> elements. Since Bootstrap's grid follows the DOM flow by default, this will keep responsiveness working without extra classes:

<div class="row d-flex justify-content-center align-items-start align-content-around">
  <div class="item text-light wow fadeInUp bg-dark col-sm-5 col-5">Div B</div>
  <div class="item text-light wow fadeInUp bg-dark col-sm-5 col-5">Div A</div>
</div>

This is the simplest approach if you don't need different layouts across breakpoints.

Quick Notes: #

• Double-check your Bootstrap version to use the correct class names—mixing v3 and v4/v5 classes will break the layout.
• Your existing .d-flex, .justify-content-center, etc., classes will still work perfectly with these changes, so you won't lose your current alignment.
• If "position B" is outside the current row, consider wrapping related items in nested rows or flex containers to maintain responsiveness.

内容的提问来源于stack exchange，提问作者Midhun.V.Nadh