Change image using only CSS [closed]

Instead of trying to change the URL of the img tag, use your media query to hide the image and change the :before of your <a>. Like this…

@media screen and (max-width: 59.6875em) {
    .site-branding img {
        display:none;
    }
    .site-branding a::before {
        content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png");
    }
}