link tag preload image media attribute min-width not working

In this post, I describe how to fix an issue I had getting the link tag media attribute with min-width to work correctly.

Cause

Despite specifying a min-width of 500px, the link tag was still preloading the image even below a screen width of 500px.  The cause of the problem turned out to be the placement of my link tag in my HTML.

Resolution

The resolution turned out to be very simple.  I had inadvertently placed the link tag above my viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

To resolve the issue, I moved my link tag below my viewport meta tag:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    <link rel="preload"
          href="bg-image-wide.png"
          as="image"
          media="(min-width: 500px)" />