How to specifically display certain columns in nth-child?

Question

I have this css code that I've tried from another website:

@media only screen and (max-width: 800px) {
#data tr > * {display: none}
#data tr > *:nth-child(12) ~ * {display: table-cell}
}

But this code displays only the 13th column and the others and hides the column[1-12]. How do display specific columns when I access my webpage in mobile? For example, I want to display only 4 columns when in mobile: columns(1,28,29,97). Is there any way to display column(1,28,29,97) specifically?

Answer 1

Try something similar to this:

https://jsfiddle.net/h9z6hLjv/

Just add the class showMob to the columns you want to display for mobile. Resize the window to see the media query take effect.