[Resolved] show columns diffrent on mobile and desktop

[Anders Nielsen]

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?

[Tom]

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 🙂

[Anders Nielsen]

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

[Anders Nielsen]

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>

[Tom]

Ah perfect – glad you got it working 🙂

[Author]

Posts