diff --git a/glue/formats/css.py b/glue/formats/css.py
index ecb7177..65b8000 100644
--- a/glue/formats/css.py
+++ b/glue/formats/css.py
@@ -28,7 +28,7 @@ class CssFormat(JinjaTextFormat):
             width: {{ image.width }}px;
             height: {{ image.height }}px;
         }
-        {% endfor %}{% for r, ratio in ratios.items() %}
+        {% endfor %}{% for r, ratio in ratios.items()|sort %}
         @media screen and (-webkit-min-device-pixel-ratio: {{ ratio.ratio }}), screen and (min--moz-device-pixel-ratio: {{ ratio.ratio }}), screen and (-o-min-device-pixel-ratio: {{ ratio.fraction }}), screen and (min-device-pixel-ratio: {{ ratio.ratio }}), screen and (min-resolution: {{ ratio.ratio }}dppx) {
             {% for image in images %}.{{ image.label }}{{ image.pseudo }}{% if not image.last %},{{"\n"}}    {% endif %}{% endfor %} {
                 background-image: url('{{ ratio.sprite_path }}');
diff --git a/glue/formats/less.py b/glue/formats/less.py
index dd07638..98005ab 100644
--- a/glue/formats/less.py
+++ b/glue/formats/less.py
@@ -14,7 +14,7 @@ class LessFormat(CssFormat):
             -webkit-background-size: {{ width }}px {{ height }}px;
             -moz-background-size: {{ width }}px {{ height }}px;
             background-size: {{ width }}px {{ height }}px;
-            {% for r, ratio in ratios.items() %}
+            {% for r, ratio in ratios.items()|sort %}
             @media screen and (-webkit-min-device-pixel-ratio: {{ ratio.ratio }}), screen and (min--moz-device-pixel-ratio: {{ ratio.ratio }}),screen and (-o-min-device-pixel-ratio: {{ ratio.fraction }}),screen and (min-device-pixel-ratio: {{ ratio.ratio }}),screen and (min-resolution: {{ ratio.ratio }}dppx){
                 background-image:url('{{ ratio.sprite_path }}');
             }