This topic is now archived and is closed to further replies.

Rearranging The Order of Elements for Display on Mobile Devices

4 posts in this topic

Hi Team, 


I've created a new website using PageLines DMS, and I have a questions around the Mobile display of this website.


When viewed using a laptop/desktop things are great and visitors can see the pics and the form, side by side. 


When being viewed on a smaller mobile device, like an iPhone things that are in two columns (wedding/pets) get a rank/order and appear in one continuous stream of content. 


My questions is, can I choose the order in which items appear? My client wants the text box that contains the contact form to appear first, rather than the large image galleries and testimonials. 


Desktop - side by side is great - perfect as it is now

Mobile - prefer the text box inc contact form to appear first, then images/galleries/testimonials


Can this happen? What changes do I need to make to have things arranged in this order for mobile devices?


Thanks for your help with this.


- Fiona

Share this post

Link to post
Share on other sites

HI Fiona,


There isn't any easy way to change the order of elements in mobile view unfortunately.

However, what you can do is hide section areas using the hidden classes, which can be found here (scroll down until you seen Visibility) -


Unfortunately, these do not work on individual section styling classes fields. If you want to do this on individual sections you will need to use @media queries.

Share this post

Link to post
Share on other sites

Could I apply these to column sections?


So I can hide the desktops' left column on mobile devices - to hide all visuals.


- Fiona

Share this post

Link to post
Share on other sites

Hi Fiona


Yes you can use those classes on any element on the site. Just use the class/id for the column and apply the class to hide on the mobile :-)

Share this post

Link to post
Share on other sites

  • Similar Content

    • BUG: "content" adds 1 more padding on mobiles
      By micstepl+
      "content section" adds 1 more padding on mobiles
      see attached image
    • Visibility on mobile - tags or code?
      By mikeeg8+
      Is there a quick way to show/hide things on mobile and desktops please, i.e. like a shortcode or similar?
      I've used a bit of code, but wondered if that was the mode elegant way - is there something built into a media box, for example that would give me a hide on desktop toggle?
      Thank you
    • Textbox contents against the side of the screen on smartphones
      By Kempston+
      Good day
      How do I indent textbox content so that it's not flush against the side of the screen on mobile devices?
      When I view Kempston Truck Hire East London on my phone, the text is aligned against the side of the screen and doesn't look right.
      Many thanks
    • Hero Section - Mobile View Issue
      By hibbsy78+
      Following the latest updates I now have an issue with the hero section on mobile. The content is extremely narrow. All looks ok on desktop....

    • Can I remove the play button that appears on canvas area background images on mobile?
      By crose+
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      Thanks in advance.