Loading different banners into html file depending on screen width? (Responsive)

I have a html file that has my banner in it. I call my banner into the html file with this script in the head section: <script type="text/javascript" charset="utf-8" src="banner_edgePreload.js"></script>

I also have a second banner called banner2. So all I have to do to switch the banners in my html file is put a 2 after the word banner in the script above ^ because they use the same resources.

Now im trying to get it to change from banner to banner2 when screen width is 1200 or less.

I was using this code but it doesn't seem to be working:

<script type="text/javascript" charset="utf-8" src="banner_edgePreload.js"></script>

<script type="text/javascript" charset="utf-8" media="screen and (max-device-width: 1200px)" src="banner2_edgePreload.js"></script>

Any ideas on how I can get this to work?

Thanks!