Different content if a landing page is view on mobile vs desktop

Mélina_Cardin
Level 1

Different content if a landing page is view on mobile vs desktop

Can the order of a landing page content be different on mobile and desktop? We’d like to prioritize the mobile content when the user is on a mobile, and keep the content as is when using a desktop.

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Different content if a landing page is view on mobile vs desktop

Of course.

I assume you're using Guided Landing Pages.

The CSS Flexbox order: style is the best fit. Traditional float: styles may accomplish the same thing, depending on your layout. Or you can rearrange using all manner of JS.

These are assignments for your designer.

Dave_Roberts
Level 10

Re: Different content if a landing page is view on mobile vs desktop

I'd add that working with Bootstrap makes this a lot easier - there are built-in classes to help "flex" (display) and "order" (position) content without needing to build it up from scratch. 

On the "order" link above, there's a list of classes with device "breakpoints" (screen size) built in to make it easy to have something be, for example, order-0 (top) for mobile and up, and order-lg-4 (4th) for "lg" (large) displays and up. The most practical way I could think of to set this up on a template without having to expose/edit the base HTML each time would be to set the mobile order in the code and then use a variable to add the breakpoint (sm, md, lg, xl) and order # (1-12) for any elements you wanted to re-arrange.