How to Swap Headings Between Desktop and Mobile in Elementor

Sometimes responsive design isn’t just about layout — it’s about copy.

There are cases where the desktop version of a heading should say something different than the mobile version, or where the structure, emphasis, or wording changes between devices.

In those situations, forcing everything into one heading with CSS can overcomplicate things.

This tutorial shows how to safely swap headings between desktop and mobile in Elementor using CSS — and, just as importantly, when this approach should (and should not) be used.

When To Use:

This technique is best used when:

• The text content is different between desktop and mobile
• The order or emphasis of words changes
• Mobile users need shorter, scannable copy
• You are intentionally writing device-specific messaging

Example:

Desktop

Enterprise-grade analytics for modern teams

Mobile

Analytics for modern teams.
Enterprise-grade performance.

That’s a content difference, not just a layout difference — and that’s where this method is appropriate.

When To Avoid:

You should not use this approach if:

• The text is the same and only line breaks change
• You’re fixing spacing or wrapping issues
• The heading is part of blog or documentation structure
• Accessibility and single-source content are priorities

In those cases, a single heading styled with CSS is the better solution.

Step 1: Add Two Headings in Elementor

Add two Heading widgets in Elementor.

Desktop Heading

• Text: your desktop version
• Heading level: H1, H2, etc. (keep consistent)
• Advanced → CSS Classes:

heading-desktop

Mobile Heading

• Text: your mobile-specific version
• Same heading level as desktop
• Advanced → CSS Classes:

heading-mobile

At this point, both headings will appear — that’s expected.

Step 2: Add the CSS to Swap Them by Device

Go to Appearance → Customize → Additional CSS

Paste in the following code:

/* Desktop: show desktop heading, hide mobile heading */
.heading-desktop {
  display: block;
}

.heading-mobile {
  display: none;
}

/* Mobile: swap headings */
@media (max-width: 768px) {
  .heading-desktop {
    display: none;
  }

  .heading-mobile {
    display: block;
  }
}

Click Publish.