Convert table into mobile responsive format using media query

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!