• 0

Rearranging The Order of Elements for Display on Mobile Devices


Question

Posted · Report post

Hi Team, 

 

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

 

http://imagecatchers.com.au/

 

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

3 answers to this question

  • 0

Posted · Report post

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
  • 0

Posted · Report post

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) - http://docs.pagelines.com/tutorials/html-css-utilities

 

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
  • 0

Posted · Report post

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now