bootstrap 3 - responsive table layout to where each td is on a new row

Question

I have a table and it's a survey so it has a thead with answer types and a tbody with a question and radio buttons. What I would like to happen is that when the user shrinks the screen to mobile-size that it changes the way the table looks, so instead of having everything horizontal it shows the question on 1 line and each radio button on a new line... something like this:

How could I do that most easily with the code I have below? I've been trying to make it responsive but it won't work.

<table class="table row" id="10878">
            <thead>
                <tr class="">
                    <th></th>
                        <th class="matrixOptions">Very likely</th>
                        <th class="matrixOptions">Not Likely</th>
                </tr>
            </thead>
            <tbody class="container">
                <tr class="matrixList row">
                    <td class="matrixQuestion col-xs-12 col-sm-6">Would you work for a startup?</td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22671">50%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10879" id="22671" type="radio"><i></i></label></div>
                        </td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22672">50%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10879" id="22672" type="radio"><i></i></label></div>
                        </td>
                </tr>
                <tr class="matrixList row">
                    <td class="matrixQuestion col-xs-12 col-sm-6">12345</td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22673">100%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10880" id="22673" type="radio"><i></i></label></div>
                        </td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22674">0%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10880" id="22674" type="radio"><i></i></label></div>
                        </td>
                </tr>
            </tbody>
        </table>

Any thoughts? Thank you!

Answer 1

The easiest way is to simply give each of the table elements display: block at the magic Bootstrap mobile width of 768px. The default width for block-level elements is 100%, so each element will take up a full row and stack on top of each other.

This can be seen in the following:

@media screen and (max-width: 768px) {
  table, thead, tr, td {
    display: block;
  }
}

<table class="table row" id="10878">
  <thead>
    <tr class="">
      <th></th>
      <th class="matrixOptions">Very likely</th>
      <th class="matrixOptions">Not Likely</th>
    </tr>
  </thead>
  <tbody class="container">
    <tr class="matrixList row">
      <td class="matrixQuestion col-xs-12 col-sm-6">Would you work for a startup?</td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22671">50%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10879" id="22671" type="radio"><i></i></label></div>
      </td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22672">50%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10879" id="22672" type="radio"><i></i></label></div>
      </td>
    </tr>
    <tr class="matrixList row">
      <td class="matrixQuestion col-xs-12 col-sm-6">12345</td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22673">100%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10880" id="22673" type="radio"><i></i></label></div>
      </td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22674">0%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10880" id="22674" type="radio"><i></i></label></div>
      </td>
    </tr>
  </tbody>
</table>