Different header images for different size screens

Hello,
I would like to have different images display for different media width.
I have 4 images:

1. one for desktop
2. one for width under 1018px but above 768px
3. one for width under 767px but above 480px
4. one for width below 480px

Searching for solutions, I have found this thread:
change the site-header image on mobile
I have foolowed the instructions, adding the following to my functions.php file (though I am sure I did not specify the width correctly, don’t know how to make a condition between two values:

<?php
add_action('wp_head', 'my_custom_js_script');

function my_custom_js_script(){
?>
<script>
jQuery( document ).ready( function( $ ) {

   function change_image_res() {

       if ( $( window ).width() <= 1018 ) {
           $( '#site-logo a img' ).attr( "src", 'https://www.wingtsun.co.il/images/logo-banner-1018.png' );
       } else ( $( window ).width() <= 480 ) {
           $( '#site-logo a img' ).attr( "src", 'https://www.wingtsun.co.il/images/logo-banner-480.png' );
       } else {
           $( '#site-logo a img' ).attr( "src", 'https://www.wingtsun.co.il/images/logo-banner-767.png' );
       }
   }

   $( window ).load( function() {
       change_image_res();
   } );

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

    $('#site-logo a img').show();

} );
</script>
<?php
}
?>

I only included three images, the fourth is specified in the header.file, and I don’t know if it is right or not.
And made the change in CSS file, to prevent the “jumping” of the image, as was said.
However, I don’t code myself in php, and there is one instruction missing:
What should I do in my header.php file to make it all work?
As of now, the appropriate portion of my header.php looks like this:

       	<header id="masthead" class="header" role="banner">
            	<div class="row">
                	<div class="col-md-12">
                    	<div class="logo site-branding">

                            <div id="site-logo"><a href="https://www.wingtsun.co.il/" rel="home"><img src="https://www.wingtsun.co.il/images/logo-banner3.png" alt=" ?????-??? ????? " /></a></div>

                        </div> 
                   	</div>
                </div>	
            </header>

I appreciate very much a bit of help here.
Usually, for some reason, I don’t get any help on this forum. I really hope this time is different…
Thank you,
Vera