Break a table row into multiple line (responsive layout)

You can do this purely with a couple of lines of css…

    @media all and (max-width:768px) {
        .calculator tr {    display: table;  width:100%;    }               
        .calculator td {    display: table-row; }           
    }

.calculator is the class used for the table:

<table class="calculator">

I use this to quickly alter the table that I use for calculator inputs for smarter looking design when viewing between mobile/desktop: live example here though the difference is best viewed by a mobile device and desktop along side each other (not all my mobile scripts are delived to the desktop browser so the overall design may look odd if you purely view through a desktop browser and minimise but the cells will become rows etc. to illustrate).

In addition you could add a span / label etc within the cell and makes this

display:table-cell;

and make the table a block if you prefer, this approach is much more lightweight and stops the necessity to use javascript.