Coder Wrap provides free to use snippets

/**Typeo CSS Start (Note if is not need so remove)**/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #000;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.cm-demo {
  border: #ccc 2px solid;
 max-width:600px;
  margin: auto;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  font-size: 30px;
  font-weight: 700;
}
/**Typeo CSS End (Note if is not need so remove)**/

function mediaCondition() {
  var demoid = document.getElementById('demo')
  if (mobilemedia.matches) { // If media query matches
    demoid.innerHTML = "This is Mobile View";
    demoid.classList.add('mob-view');
    demoid.classList.remove('desk-view');
  } else {
   demoid.innerHTML = "This is Desktop View";
   demoid.classList.add('desk-view');
   demoid.classList.remove('mob-view');
  }
}
var mobilemedia = window.matchMedia("(max-width: 767px)")
mediaCondition() // function at run time
mobilemedia.addListener(mediaCondition) // Attach listener function