title: customizing bootstrap columns in portrait orientation for mobile devices
body: <p>Task: Trying to make a mobile webpage: <a href="http://jsfiddle.net/anujbhai/hgaH7/3/" rel="nofollow">http://jsfiddle.net/anujbhai/hgaH7/3/</a> (also include jQuery &amp; Bootstrap files in order to run properly).</p>
  
  <p>Problem: Page should change layout according to Orientation - in landscape mode</p>
  
  <pre><code>&lt;div id="videoThumbs"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>will show 2 thumbnails and snaps beneath the </p>
  
  <pre><code>&lt;div id="billboard"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>