HTML Flexbox CSS <style> @media min-width Problem

Trying to implement:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website
within Django. 
Works fine when all of the Flexbox <style>....</style> section is within the template but if I move this style section to a css the following @media sections stop working but the rest continues to work.

<style>
..........
   @media all and (min-width: 600px) {
        .aside { flex: 1 auto; }
    }

    @media all and (min-width: 800px) {
        .main    { flex: 3 0px; }
        .aside1 { order: 1; }
        .main    { order: 2; }
        .aside2 { order: 3; }
        .footer  { order: 4; }
    }
</style>

If I implement it as a standard index.html and styles.css pair without Django it does work.
Any suggestions?  Thanks for your help.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/1b49e8aa-2a31-4673-ab2e-ebce9ab162c9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.