How to 'hide' html element content when the browser re-size to mobile screen size?

Question

How to 'hide' html element content when the browser re-size to mobile screen size? But, when I resize it back to desktop screen size, it will 'unhide'? All css like color need to be maintained regardless of the screen size. By the way, I am using javascript/jquery to dynamically create these table tag html elements which is done.

At the moment, for desktop screen size, it looks like this which looks fine at browser.

But, when I resize my browser to mobile size, it looks not so nice.

Answer 1

Wrap the text of the elements in a span with a class (say, wide-only but the actual name isn't important), and use a media query to hide it when the display area is below a certain size via CSS:

@media screen and (max-width: 400px) {
    .wide-only {
        display: none;
    }
}

If the display width is less than 400px, that rule will hide the span s.