Convert table into mobile responsive format using media query - html

Question

<div id="horizontalContainerTile">
<div id="horizontalContainerTile_1">
<table class="horizontalContainerTable">
<tbody>
<tr>
<td id="horizontalTile0">
<div id="genericFormTile">
<div id="genericFormTile_0">
<table class="layout" id="genericFormTable">
<tbody>
<tr id="distributorId">
<td class="formFieldLabel" id="formCellLeft">Comfort Stylist ID:</td>
<td id="leftLabel"></td>
<td class="formField" id="formCellRight">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td id="horizontalTile1">
<div id="genericFormTile">
<div id="genericFormTile_1">
<table class="layout" id="genericFormTable">
<tbody>
<tr id="individualFirstName">
<td class="formFieldLabel" id="formCellLeft">First Name:</td>
<td id="leftLabel"></td>
<td class="formField" id="formCellRight">
</td>
</tr>
</tbody>
</table>
<input type="hidden" name="resultsPerPage" value="100"><!-- check if the value for field comes from bundle --><input
type="hidden" name="pageNumber" value="1">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Currently this produce a format like this:
Comfort Stylist ID: <textbox> First Name: <textbox>
And what I want on mobile device is:
Comfort Stylist ID: <textbox>
First Name: <textbox>
Please tell me, if I can do this using media query.
And I am not able to post my existing CSS code, I hope that will not be the issue.

Answer 1

I found it's solution and this we can achieve simply by changing your #media query CSS.
table,tbody,td{
display:block;
}
And other for positions or styling elements you can apply different CSS.
Thanks All!