如何使用Bootstrap 4重排列列并实现Logo全屏显示？

Got it, let's adjust your Bootstrap 4 code so the logo can display full-width (especially on smaller screens) while keeping your desired desktop layout. Here's how to use column sizing and reordering classes to make this work:

Modified Code #

<div class="container">
  <div class="row align-items-center">
    <!-- User Account Section -->
    <div class="col-md-3 col-6 order-md-1">
      <div class="right-user-account">
        <a href="#">User Account</a>
      </div>
    </div>

    <!-- Logo Section (full-width on mobile, centered on desktop) -->
    <div class="col-md-6 col-12 order-md-2 order-first">
      <img src="images/logo.png" class="img-fluid" alt="Site Logo">
    </div>

    <!-- Login Section -->
    <div class="col-md-3 col-6 order-md-3">
      <div class="left-login">
        <a href="#">Login</a>
      </div>
    </div>
  </div>
</div>

Key Changes Explained #

• Full-width logo on small screens: Adding col-12 to the logo column makes it take up the entire row width on devices smaller than 768px (mobile). The img-fluid class ensures the logo scales smoothly to fit the column without overflowing.
• Responsive column sizing: The user account and login columns use col-6 on small screens, so they split the row evenly below the full-width logo.
• Column reordering:
  • order-first on the logo forces it to appear as the top element on mobile (even though it’s in the middle of the HTML structure).
  • order-md-1, order-md-2, order-md-3 override the order on medium/larger screens, restoring your original layout: user account left, logo center, login right.

If you wanted the logo to be full-width on all screen sizes (not just mobile), you’d split the content into two separate rows: one full-width row for the logo, and another row for the account/login links. But the responsive approach above is likely what you’re aiming for.

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