css - Wrap two adjacent td's -

i have table 2 columns, both 300px wide, taking 600px in width on regular computer screen.

i want modify display of table small screen mobile devices.

is there css way make cell of right column wrap , go below cell of left column, followed next left cell, followed next right cell, , on?

here proof-of-concept demonstration.

consider following table:

<table>     <tr>         <td>first row - cell 1</td>         <td>first row - cell 2</td>     </tr>     <tr>         <td>second row - cell 1</td>         <td>second row - cell 2</td>     </tr> </table> 

if float table cells, can them stack vertically, example:

table {     width: auto; } table td {     background-color: lightgray;     float: left;     width: 150px;     margin: 10px 0; } 

you need adjust table width , cell width in media query.

the 1 advantage of using floats table responsive without using media queries, may useful in instances.

fiddle: http://jsfiddle.net/audetwebdesign/qsd7g/