How to remove or hide this when resize the browser?

This is an shopping-cart icon with a "cart" paragraph. When browser is resized, I want to hide or remove the "cart" paragraph and only show the shopping-cart icon. I've tried a lot of different ways but still cannot do it. I've came out three ways: 1. Use the css selector. And use the media query to hide the p element.

@media only screen and (max-width: 600px) {
 body {
    background-color: lightblue;
 }
}

2.Use JS to remove the p element when resize the browser.

3.Also use JS to add a new icon element to take place of the origin ones.

But I don't know how exactly they can work, help me please, Thanks a lot~

Here's what I'm working on :)

 <p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart</p>