Chamar css por @media queries

Olá Boa tarde galera, estou tendo uma dificuldade em fazer alguns ajustes para área mobile do site que estou desenvolvendo,

tenho um css normal sem nenhum media queries porem se eu vou e aplico um, exemplo

@media (max-width: 991px)

ele esta atingindo todo o site mesmo depois de ter passado de 991px ele pega as atribuições que dei somente max 991

isso colocando na mesma folha de estilo do site.

em outros sites fora do wordpress eu faria assim, chamaria cada folha separada no header

<!-- ===CSS=== -->

 <link href="css/style.css" type="text/css" rel="stylesheet" media="screen and (min-width: 961px)" />

 <!-- ===TABLE=== -->
 <link href="css/medium.css" type="text/css" rel="stylesheet" media="screen and (max-width: 960px) and (min-width: 481px)" />

 <!-- ===MOBILE=== -->
 <link href="css/small.css" type="text/css" rel="stylesheet" media="screen and (max-width: 480px)" />
 <link href="css/small.css" type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" />

porem no wordpress, as folhas de estilo sao chamadas dessa forma abaixo e eu nao sei como aplica o media queries no php, existe alguma maneira de fazer isso? a folha é chamada dentro do functions.php

/**************************************
* SCRIPTS / CSS
**************************************/

function wp_responsivo_scripts() {
 // Carregando CSS header
 wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
 wp_enqueue_style( 'style', get_stylesheet_uri() );

 // Carregando Scripts header
 wp_enqueue_script('bootstrap-js', get_template_directory_uri().'/assets/js/bootstrap.min.js', array('jquery') );

 //Carregando no footer
 //wp_enqueue_script('functions-js', get_template_directory_uri().'/assets/js/functions.js', array('jquery'), '', true );
}