How to Move Drupal Blocks to a Different Region on Mobile Devices

Desktop block placement rarely maps cleanly to mobile. A sidebar signup, contact CTA, filter panel, or login box may make sense beside the main content on a wide screen, but feel badly buried on a phone. For business owners and agency teams, that is not a cosmetic problem. It affects task completion, lead flow, and how quickly visitors find what matters.

The good news is that modern Drupal gives you a few solid ways to handle this. The important correction to older tutorials is this: you do not need a breakpoint management module just to make responsive layout changes. In current Drupal, *.breakpoints.yml is mainly needed when Drupal itself must consume the breakpoint data, such as responsive images. If you are only changing layout on smaller screens, regular CSS is usually the right first move.

Start with the least invasive option

Before adding regions or extra block placements, decide what problem you are actually solving:

If the block only needs to appear earlier or later on mobile, use CSS or your theme's layout utilities to reorder it.
If the block truly belongs in a different area of the page on mobile, add a dedicated region and place a separate mobile version there.
If editors need ongoing page-by-page control, consider a Layout Builder-based solution instead of hard-coding the layout into the theme.

That sequence matters. Reordering one existing block is cheaper to build, easier to test, and less fragile during future theme updates.

Option 1: Reorder visually with CSS

For most Drupal sites, this is the cleanest answer. Keep a single block placement, then change the visual order at a mobile breakpoint. That avoids duplicate configuration and keeps analytics, forms, and personalization logic attached to one rendered block.

If your theme already uses Bootstrap, responsive flexbox order utilities can help. Otherwise, a small theme stylesheet is enough. For example:

@media (max-width: 767.98px) {
  .layout-shell {
    display: flex;
    flex-direction: column;
  }

  .region-content {
    order: 1;
  }

  .region-featured {
    order: 2;
  }

  .region-sidebar-first {
    order: 3;
  }
}

The exact selectors depend on your theme, but the principle is stable: change the order of the regions or wrappers, not the business logic behind the block. This is usually the best fit when the same block should exist once, just in a smarter reading order on smaller screens.

Option 2: Add a dedicated mobile region

Sometimes a visual reorder is not enough. A common example is a mobile CTA that needs to sit directly under the header or menu, while the desktop version belongs in a sidebar. In that case, create a dedicated theme region and place a mobile-specific block there.

Add the region to THEMENAME.info.yml:

regions:
  header: Header
  content: Content
  sidebar_first: Sidebar first
  mobile_after_header: Mobile after header
  footer: Footer

Then print that region in your page template where it should appear:

{% if page.mobile_after_header %}
  {{ page.mobile_after_header }}
{% endif %}

After that, rebuild caches with drush cr, go to admin/structure/block, make sure you are editing the active front-end theme, and place the block into the new region. Drupal block placement is theme-specific, so this is worth double-checking before you assume something is broken.

There is one important Drupal detail here: you can place multiple copies of a block, each with its own configuration and visibility rules. That makes a mobile-specific placement possible without custom module code. In practice, I recommend this for simple promotional or informational blocks. If the block contains a form, exposed filters, personalized output, or anything interactive, rendering two versions can create unnecessary complexity. In those cases, one rendered block plus CSS reordering is usually safer.

Use visibility rules for page logic, not viewport logic

Drupal's built-in block visibility settings are useful for paths, roles, and similar conditions. They are not a native mobile breakpoint system. So if you create separate desktop and mobile block placements, use Drupal visibility rules for where the block belongs across the site, and use CSS classes for whether that placement should show on mobile or desktop.

@media (max-width: 767.98px) {
  .block-desktop-only {
    display: none;
  }
}

@media (min-width: 768px) {
  .block-mobile-only {
    display: none;
  }
}

This approach is more predictable than older Drupal setups that relied on JavaScript, cookies, reloads, or breakpoint-aware context switching just to move blocks around. Those patterns solved a real Drupal 7-era problem, but they are usually not the lowest-risk choice for a current site.

What I recommend in real projects

If the goal is better mobile UX without adding long-term maintenance cost, I would usually make the decision like this:

Use CSS reordering when the content is the same and only the reading order needs to change.
Add a dedicated mobile region when the block genuinely belongs in a different structural position.
Avoid duplicate rendered blocks for complex forms or personalized components.
Document the chosen breakpoint and region names clearly so the next developer does not have to reverse-engineer the layout.

That is the practical balance between fast delivery and clean handoff. If your Drupal layout needs to work harder for mobile visitors, but you want to keep the implementation stable for future editors and developers, this is exactly the kind of Drupal and delivery decision I help teams make.

Need help with this kind of work?

Plan a cleaner Drupal mobile layout Get in touch with Greg.

Sources

Last modified

2026-06-04