title: CSS: 1 or 2 table columns depending on landscape / portrait mode
body: <p>My website is designed in landscape mode - one large headline and a table in the center of the layout with 2 columns that act as menu.</p>
  
  <p>However, if the site is displayed in portrait mode on a mobile phone, there is by far not enough space available for this layout, so using the flexi-background.js routines, the layout is 'compressed' and becomes very, very small while the background is nicely stretched on the screen.</p>
  
  <p>The ideal way would be to simply append the 2nd table column to the 1st column by some 'technique' if portrait mode is detected. I could do that with PHP, but feel there must be a smarter way with CSS or some other technique - does anyone have experiences with a requirement like this one and how to adjust the landscape layout to portrait mode?</p>
  
  <p>meta code:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;menu item 1&lt;/td&gt; 
  &lt;td&gt;menu item 2&lt;/td&gt; 
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;menu item 3&lt;/td&gt; 
  &lt;td&gt;menu item 4&lt;/td&gt; 
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;menu item 5&lt;/td&gt; 
  &lt;td&gt;menu item 6&lt;/td&gt; 
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;menu item 7&lt;/td&gt; 
  &lt;td&gt;menu item 8&lt;/td&gt; 
  &lt;/tr&gt;
  &lt;/table&gt; 
  </code></pre>
  
  <p>If after the change, the "list" of menu items would be 1,3,5,7, 2,4,6,8 it would be okay.</p>