HTML Hide and show elements on different screen size

Do you have a website and do you want to show and hide any element in different screen sizes?
It will be easy now with the code I create.

How does it work?
There are the Html and Css codes come together to work currently.
Min-length and Max-length can decide any pixel. That pixel will work with the div code example and example2.
Note: If you know Html and Css even a bit, you can do this code by changing and put to your website easily.
Working 100%. go to the link for the test by yourself https://codepen.io/alfred-adell/pen/abjjQMj

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: yellow;
  padding: 20px;
}

@media screen and (max-width: 700px) {
  div.example {
    display: none;
  }
}

div.example2 {
  background-color: red;
  padding: 20px;
}

@media screen and (min-width: 700px) {
  div.example2 {
    display: none;
  }
}
</style>
</head>
<body>

<h2>Hide and show elements on different screen size</h2>

<div class="example">Hello ;) running 700 Max.</div>
<div class="example2">We dont want to show this. 700min</div>

<p>9koala.com provided. When the browser's width is 700px wide or less, hide the div element. Resize the browser window to see the effect.</p>

</body>
</html>

Note: Resize your browser while testing to see the effect.