Site logo

Archived topic

show columns diffrent on mobile and desktop

4 replies · Started by Anders Nielsen on June 29, 2019

Viewing posts 1–5 of 5

Hi

Is there a way to show columns diffrent on mobile and desktop?

I have a contact-form on the contact page placed at the right side of the screen - using desktop

Using:

div class="grid-60 tablet-grid-60 mobile-grid-100 first-column"
    First column content etc...
/div
<div class="grid-40 tablet-grid-40 mobile-grid-100 second-column">
    FORM HERE
</div> 

On mobile the form is showed below the content... But I want the contact-form to be first, and content second! (and still have the contact-form at the right using desktop)

Is that posible?

Hi there,

You can use the pull and push classes for that.

For example:

<div class="grid-40 tablet-grid-40 mobile-grid-100 second-column push-40">
    FORM HERE
</div> 

<div class="grid-60 tablet-grid-60 mobile-grid-100 first-column pull-60"
    First column content etc...
</div>

Let me know if that does it or not :)

Hi Tom
It works on mobile, but the desktop look a little wierd...

Works now... Changed the push/pull values:

<div class="grid-40 tablet-grid-40 mobile-grid-100 second-column push-60">
FORMS
</div> 
<div class="grid-60 tablet-grid-60 mobile-grid-100 first-column pull-40"
some here</div>

Ah perfect - glad you got it working :)

This archived topic is closed to new replies.