title: Boostrap - automatically repositioned div (vertical vs horizontal view)
body: <p>Please imagine that below shows a phone screen in horizontal (landscape) orientation:</p>
  
  <pre><code>+------------------------+
  | xxx    xxxxxxxx    xxx |
  | xxx                xxx |
  | xxx  oooooooooooo  xxx |   
  |                        |
  |                        |
  |                        |
  +------------------------+
  </code></pre>
  
  <p><code>xxx</code> mark divs that should stay in place even if the phone is rotated to vertical (portrait) orientation.
  <code>ooo</code> marks a div that I would like to be dynamic.  That is: if possible it should be displayed between <code>xxx</code> divs (as shown above). 
  If there is not enough place for <code>ooo</code> div (because phone is rotated to vertical display), the div should be shown below <code>xxx</code> divs.
  Like this:</p>
  
  <pre><code>+------------------+
  | xxx xxxxxxxx xxx |
  | xxx          xxx |
  | xxx          xxx |
  |   oooooooooooo   |
  |                  |
  |                  |
  |                  |
  |                  | 
  +------------------+
  </code></pre>
  
  <p>How can such view be achieved? Do I have to create two divs and switch their visibility with media queries?</p>