Prueba bootstrap

by Christian Unigarro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container prueba_bootstrap">
  <h1></h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis fugiat, assumenda magni incidunt modi maiores ipsam nesciunt ullam aspernatur, molestias sint, esse cum porro reprehenderit repellendus quam. Autem repudiandae, praesentium.</p>
  
  <p class="tamanio_viewport"></p>
  
</div>

SCSS

.prueba_bootstrap h1:before {
  content: "< 768";
  @media (min-width: 768px) {
    content: "768 - 992";
  }
  @media (min-width: 992px) {
    content: "992 - 1200";
  }
  @media (min-width: 1200px) {
    content: "> 1200";
  }
}

JavaScript

$( window ).resize(function() {
    if ($(window).width() <= 768) {
      $('.prueba_bootstrap h1').css('background-color','green');
    }
    else if ($(window).width() >= 768 &&  $(window).width() <= 992) {
      $('.prueba_bootstrap h1').css('background-color','yellow');
    }
    else if ($(window).width() > 992 &&  $(window).width() <= 1200) {
      $('.prueba_bootstrap h1').css('background-color','orange');
    } else {
      $('.prueba_bootstrap h1').css('background-color','red');
    }
    $('.tamanio_viewport').text($(window).width());
 });