media.js

//Добавление глобального класса для переопределения стилей
function dowidth(){
  var width = $('body').width();

  if(width >= 1200) {
      $('body').removeClass('large medium small x-small mobile');
      $('body').addClass('large');
  } 
  if(width < 1200 & width >= 992) {
      $('body').removeClass('large medium small x-small mobile');
      $('body').addClass('medium');
  } 
  if(width < 992 & width >= 768) {
      $('body').removeClass('large medium small x-small mobile');
      $('body').addClass('small');
  } 
  if(width < 768 & width >= 480) {
      $('body').removeClass('large medium small x-small mobile');
      $('body').addClass('x-small');
  } 
  if(width < 480) {
    $('body').removeClass('large medium small x-small mobile');
    $('body').addClass('mobile');
  }
}

dowidth();
$(window).resize(function(){
 dowidth();
});



/////////////////////////////////////////////////////////////////////////



/*Создадим переменную в которую можно загнать моножесто классов, 
для удобного использования их в коде.
Т.е здесь он их обнаруживает один раз и все, 
а не перед каждой выборкой! это полезная фитча*/
var my = {
  window : $(window)
};

/*Собственно и сама функция*/
$(window).resize(function () {

  /*Переменная которая определяет ширину окна 
  и загоняет ее в переменную width*/
  var width = my.window.width();

  /*условие трансформации окна т.е условие которое выполнится 
  когда ширина окна достигнет определенных размеров*/
  if(my.window.width() < 640) {

    $('.right-content').css({'float':'none', 'clear':'both'});
    $('.header-menu').css('float','left');

    if(width < 480) {
      /*какое-нибудь условие*/
      if(width < 320) {
          /*какое-нибудь условие*/
      }
    }
  }
  /*Возвращает все стили на свои места т.е 
  при расширении он примет первоначальный вид*/
  else {
    $('.right-content').css({'float':'left', 'clear':'none'});
    $('.header-menu').css('float','none');
  }

});