ディベロッパーツールのモバイル端末サイズでレスポンシブ確認した時にモバイル端末用に作成したcssファイルを適用させたい

前提・実現したいこと

Airbnbの公式サイトのコーディングをしており、レスポンシブデザインの練習をしています。

発生している問題・エラーメッセージ

HTMLにメディアクエリとして、以下のように記載しました。
	<link rel="stylesheet" type="text/css" href="small.css">
	<link rel="stylesheet" type="text/css" href="medium.css" media="screen and (min-width:768px)">
	<link rel="stylesheet" type="text/css" href="large.css" media="screen and (min-width:992px)">

そして、コードを書いていき、ブラウザで確認しました。
ブラウザの横幅を動かし,メディアクエリが正常に作動しているか確認すると,
767px以下ではsmall.cssが、768px以上991px以下ではsmall.css＋medium.cssが、992px以上ではsmall.css＋medium.css＋large.cssが反映されており、正常に作動していました。

しかし、Chromeのディベロッパーツールでサイズをモバイル端末(widthが320pxや425px)にして確認すると、medium.css(widthが768px以上991px以下)のものが反映されてしまいます。

ディベロッパーツールでモバイル端末にして確認した時にsmall.cssだけを適用させたいのですが、どのようにすればいいでしょうか？

該当のソースコード

<link rel="stylesheet" type="text/css" href="small.css">
	<link rel="stylesheet" type="text/css" href="medium.css" media="screen and (min-width:768px)">
	<link rel="stylesheet" type="text/css" href="large.css" media="screen and (min-width:992px)">