调整WordPress移动端元素顺序：将旗帜移至按钮下方

Hey James, let’s get that wonky mobile layout sorted out! You want to reorder the elements from flag → text → button to text → button → flag (moving the flag below the "find out more" button) — here are a few practical ways to make that happen:

Method 1: Use CSS Flexbox order Property (No HTML Changes Needed) #

This is my go-to for quick reordering without touching your HTML structure. Just target the mobile view with a media query and adjust the element order:

/* Adjust the max-width to match your site's mobile breakpoint */
@media (max-width: 768px) {
  /* Make sure the parent container is a flex container */
  .section-container {
    display: flex;
    flex-direction: column;
  }

  /* Assign order values to reposition elements */
  .intro-text {
    order: 1;
  }

  .find-out-more-btn {
    order: 2;
    margin: 1.5rem 0; /* Add spacing between button and flag */
  }

  .flag-country-outline {
    order: 3;
  }
}

• Replace the class names (.section-container, .intro-text, etc.) with the actual classes used in your site’s code.
• The flex-direction: column ensures elements stack vertically on mobile.

Method 2: Adjust the HTML Structure #

If you prefer a more straightforward approach (and don’t need the original order on desktop), just move the flag element’s HTML code directly below the button element:

<!-- Original order -->
<div class="section-container">
  <div class="flag-country-outline">...</div>
  <div class="intro-text">...</div>
  <button class="find-out-more-btn">Find out more</button>
</div>

<!-- Updated order for mobile (and desktop, if needed) -->
<div class="section-container">
  <div class="intro-text">...</div>
  <button class="find-out-more-btn">Find out more</button>
  <div class="flag-country-outline">...</div>
</div>

• If you need the original order on desktop, just use the Flexbox order method above in a desktop media query to swap things back.

Method 3: Use CSS Grid for Precise Placement #

If your section uses Grid layout, you can define row positions to reorder elements:

@media (max-width: 768px) {
  .section-container {
    display: grid;
    grid-template-rows: auto auto auto; /* 3 rows for each element */
  }

  .intro-text {
    grid-row: 1;
  }

  .find-out-more-btn {
    grid-row: 2;
  }

  .flag-country-outline {
    grid-row: 3;
  }
}

Quick Tips #

• Add some margin-top to the flag element to create breathing room between it and the button — this will make the layout feel less cramped.
• Test your changes on multiple mobile device sizes to ensure the flag sits neatly below the button without overlapping or breaking the layout.

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