html - Table row formatting when screen size is XS -

html - Table row formatting when screen size is XS -

i using bootstrap , have table want seek , format different if screen size xs.

if screen size sm or larger, want on 1 line. if screen size xs, want have 2 lines per record.

the html below shows how format server side if knew screen size.

when screen size sm or larger:

<tr> <td>description</td> <td>code</td> <td>category</td> <td>price</td> </tr>

when screen size xs:

<tr> <td colspan=3>description</td> </tr> <tr> <td>code</td> <td>category</td> <td>price</td> </tr>

when screen size xs, not fits on 1 line , need show information. there way using bootstrap css create work?

if you're not pot-committed showing info in table (one break lot of grid-like constraints anyway), can bootstrap grid scheme this:

<div class="row"> <div class="col-xs-12 col-sm-3">description can really long.</div> <div class="col-xs-4 col-sm-3">code</div> <div class="col-xs-4 col-sm-3">category</div> <div class="col-xs-4 col-sm-3">price</div> </div> demo in jsfiddle

html css twitter-bootstrap