Bootstrap面板能否在移动端重排？桌面布局不变，移动端调整面板顺序

Hey there! I’ve run into this exact layout tweak before with Bootstrap, so let’s get your First Name and Last Name panels sitting next to each other on mobile while keeping the desktop layout totally unchanged.

Solution for Bootstrap 4+ (Recommended) #

Bootstrap 4 and above come with built-in responsive flexbox ordering classes, which makes this super straightforward. Here’s how to implement it:

Step 1: Ensure Parent Container is a Flex Row #

Wrap all your panel columns in a row d-flex flex-wrap container—this enables flexbox sorting while keeping the responsive column wrapping intact.

Step 2: Apply Responsive Order Classes #

Use order-* for mobile (xs breakpoint) and order-md-* for desktop (md breakpoint and larger) to control the panel order per viewport.

Modified Code Example:

<div class="row d-flex flex-wrap">
  <!-- First Name: Stays first on both desktop and mobile -->
  <div class="col-md-4 col-sm-6 order-1 order-md-1">
    <div class="panel panel-default">
      <div class="panel-heading">First Name</div>
    </div>
  </div>

  <!-- Middle Panels: Keep their original desktop order, shift to after First/Last Name on mobile -->
  <div class="col-md-4 col-sm-6 order-3 order-md-2">
    <div class="panel panel-default">
      <div class="panel-heading">Other Panel 1</div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 order-4 order-md-3">
    <div class="panel panel-default">
      <div class="panel-heading">Other Panel 2</div>
    </div>
  </div>

  <!-- Last Name: Jumps to second position on mobile, stays last on desktop -->
  <div class="col-md-4 col-sm-6 order-2 order-md-last">
    <div class="panel panel-default">
      <div class="panel-heading">Last Name</div>
    </div>
  </div>
</div>

What Each Class Does: #

• d-flex flex-wrap: Turns the row into a flex container that wraps columns on smaller screens
• order-1/order-2: Sets the mobile order—First Name is 1, Last Name is 2 (so they sit adjacent)
• order-md-1/order-md-2/order-md-last: Preserves the original desktop order, keeping Last Name at the end

Solution for Bootstrap 3 #

Bootstrap 3 doesn’t have native flex ordering, so we’ll add custom CSS with media queries to handle the mobile layout:

Step 1: Add Custom CSS #

/* Target mobile screens (max-width: 767px) */
@media (max-width: 767px) {
  .panel-row {
    display: flex;
    flex-wrap: wrap;
  }
  /* First Name panel stays first on mobile */
  .first-name-panel {
    order: 1;
  }
  /* Last Name panel moves to second position */
  .last-name-panel {
    order: 2;
  }
  /* All other panels shift to positions 3+ */
  .other-panel {
    order: 3;
  }
}

Step 2: Update Your HTML #

Add the custom classes to your panel containers:

<div class="row panel-row">
  <div class="col-md-4 col-sm-6 first-name-panel">
    <div class="panel panel-default">
      <div class="panel-heading">First Name</div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 other-panel">
    <div class="panel panel-default">
      <div class="panel-heading">Other Panel</div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 last-name-panel">
    <div class="panel panel-default">
      <div class="panel-heading">Last Name</div>
    </div>
  </div>
</div>

This will force the Last Name panel to sit right next to First Name on mobile, while your desktop layout remains exactly as it was.

内容的提问来源于stack exchange，提问作者Raj