Changing HTML table structure based on screen dimensions

Question

Suppose I have a 3x2 HMTL table:

 <table>
  <tr>
    <td> <div id="content1"></div> </td>
    <td> <div id="content2"></div> </td>
    <td> <div id="content3"></div> </td>
  </tr>
  <tr>
    <td> <div id="content4"></div> </td>
    <td> <div id="content5"></div> </td>
    <td> <div id="content6"></div> </td>
  </tr>
 </table>

This is fine when the screen is in landscape mode (ie - width > height)

Suppose height > width, is there a way of dynamically changing the table to the following 2x3 table:

 <table>
  <tr>
    <td> <div id="content1"></div> </td>
    <td> <div id="content2"></div> </td>
  </tr>
  <tr>
    <td> <div id="content3"></div> </td>
    <td> <div id="content4"></div> </td>
  </tr>
  <tr>
    <td> <div id="content5"></div> </td>
    <td> <div id="content6"></div> </td>
  </tr>
 </table>

Answer 1

<table>
<tr>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
</tr>
<tr>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
</tr>

table {
 display:flex;
 flex-wrap:wrap;
 width:90%;
 margin:0 auto;
}

tr {
 flex:1 0 300px;
 display:inline;
}

td {
 display:inline-block;
 width:100px;
 height:100px;
}

https://jsfiddle.net/cmckay/02tvkyj8/

http://autoprefixer.github.io/