Turn Columns into rows with bootstrap

Question

I have a table in HTML using Bootstrap:

With the code in CSS below I get it to automatically hide fields the last 3 columns when the page is resized to a resolution of 600 (width):

<style>
    @media screen and (max-width: 600px) {
        table th:nth-child(3),table th:nth-child(4),table th:nth-child(5) {
            display: none;
        }
        table td:nth-child(3),table td:nth-child(4),table td:nth-child(5) {
            display: none;
        }
    }
</style>

Thus remaining:

But I’d like it to stay that way:

And when I just clicked on + stay that way:

Have to do with bootstrap or javascript?

Answer 1

This type of behavior is better to use javascript or Angularjs. With Angular you can create this type of behavior and reuse it faster.