@media works on css. Is there something for html? -

the @media works in css section of html file. however, want centered < table > 1 column if screen below 600px wide or 2 columns if greater 600px.

the exact same stuff in table arranged differently. elements in table (select boxes) have same id in both layouts.

is there way of doing this?

so in 600px or less want:

<table>     <tr>         <td>stuff 1</td>     </tr>     <tr>         <td>stuff 2</td>     </tr>     <tr>         <td>stuff 3</td>     </tr>     <tr>         <td>stuff 4</td>     </tr> </table> 

but in greater 600px want:

<table>     <tr>         <td>stuff 1</td>         <td>stuff 2</td>     </tr>     <tr>         <td>stuff 3</td>         <td>stuff 4</td>     </tr> </table> 

you can , use single table since have same content.

table, tr, td {      display:block;  }    @media screen , (min-width: 600px){      table {          display:table;      }      tr {          display:table-row;      }      td {          display:table-cell;      }  }

<table>      <tr>          <td>stuff 1</td>          <td>stuff 2</td>      </tr>      <tr>          <td>stuff 3</td>          <td>stuff 4</td>      </tr>  </table>

responsive grid approach:

as isherwood stated in comment:

seems me table wrong approach here anyway. tables data have row/column relationship. apparently doesn't, , op should using responsive grid instead. – isherwood

this best done without tables.

div {box-sizing:border-box; width:100%;}    @media screen , (min-width:600px) {     .half {         float: left;         margin: 0;         width: 50%;     }     .row:after {       content:"";       display:table;       clear:both;     }  }

<div class="container">      <div class="row">          <div class="half">stuff 1</div>          <div class="half">stuff 2</div>      </div>      <div class="row">          <div class="half">stuff 3</div>          <div class="half">stuff 4</div>      </div>  </div>