customizing bootstrap columns in portrait orientat

Question

Task: Trying to make a mobile webpage: http://jsfiddle.net/anujbhai/hgaH7/3/ (also include jQuery & Bootstrap files in order to run properly).

Problem: Page should change layout according to Orientation - in landscape mode

<div id="videoThumbs">...</div>

will show 2 thumbnails and snaps beneath the

<div id="billboard">...</div>

while in the portrait mode the latter goes to the left of the screen and the former now shows only one thumbnail, appearing like a sidebar.

This is very hard to do with just mediaqueries and Bootstrap. I can't figure out a proper logic to be applied via JavaScript. Please help.

Answer 1

You can try using the default Bootstrap responsive utility classes.

Take a look at the documentation:

• http://getbootstrap.com/css/#responsive-utilities-classes
• http://getbootstrap.com/css/#grid-options

Small and Extra small devices classes can work for portrait tablet view and Small and Medium devices classes can works for landscape mode, you need to try various combinations.

Obviously, depends on the screen size of the tablet, but this works excellent in 7" and 9" tablets.