Switch column order for mobile layout

Design Front End Development
1

I have a contact page with on the left a tabbed panel and on the left a box with contact information:

http://guarded-garden-4334.herokuapp.com/contact.html

however for the mobile layout I would like to have the box with contact information on top and the tabbed panel underneath.

Is this possible with Bourbon Neat ?

My repository is at: GitHub - acandael/posplus: static prototype for research center website, using the Middleman static site generator and Bourbon Neat for styling

thanks for your help,

Anthony

2

If you’re using rails you can use a helper method to detect the requesting agent. This definietly isn’t a silver-bullet, but just to give you an idea I’ve used a helper method similar to this in the past for detecting if the user was using a mobile device:

def mobile_agent?
  request.env["HTTP_USER_AGENT"][/(iPhone|iPad|iPod|BlackBerry|Android)/]
end

Here’s some additional solutions for JavaScript, PHP, Node, et al: http://detectmobilebrowsers.com/

3

I’m sure a designer would roll their eyes at this solution, but why not have two columns, one of which that’s hidden in mobile and the other which is hidden at desktop resolutions? You could control the display through media queries.