Changing Column Order by Device Size

May 12, 2014 rick

Responsive design means taking the time to build  a site that works on all popular devices.  Normally, when moving from the desktop to the smartphone, columns usually stack from left to right. 90% of the time, this provides the perfect solution. Sometimes, it makes more sense to change the way the columns stack.

While working on the new Mercy Me site for SevenTwoSeven, we ran into this. The desktop design called for a layout with the menu to the left, followed by a content column, and a promotional image to the right.

Mercy Me Desktop


In this case, we wanted the far right column to appear before the center content area when viewed on a phone. Otherwise, long content areas might push our carousel to the bottom where it may be missed. How does your website stack up on the phone? Are you pushing valuable information to the bottom of the page? The more valuable the information, the higher on the page it should appear.

Mercy Me Phone



If you want the technical solution, then continue below.

The real key is to place your blocks in the correct order for the phone. Then use  col-lg-push-x to move the content area x columns to the right. And col-lg-pull-x to pull the column to the left. This switches the columns on a desktop view.



Latest News