Table row formatting when screen size is XS

I am using bootstrap and I have a table that I want to try and format different if the screen size XS.

• If the screen size is SM or larger, I want everything on one line.
• If the screen size is XS, I want to have two lines per record.

The HTML below shows how I would format it from the server side if I knew the 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 is XS:

<tr>
    <td colspan=3>Description</td>
</tr>
<tr>
    <td>Code</td>
    <td>Category</td>
    <td>Price</td>
</tr>

When the screen size is XS, not everything fits properly on one line and I need to show all the information. Is there a way using the bootstrap css to make this work?

If you're not pot-committed to showing the information in a table (one that would break a lot of grid-like constraints anyway), then you can easily do this with the bootstrap grid system like this:

<div class="row">
    <div class="col-xs-12 col-sm-3">Description can get really 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