diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 3717da010..09aad638c 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -14,9 +14,14 @@ export const merge = (a, b) => {
 // sort object-value responsive styles
 const sort = obj => {
   const next = {}
-  Object.keys(obj).sort().forEach(key => {
-    next[key] = obj[key]
-  })
+  Object.keys(obj)
+    .sort((a, b) => a.localeCompare(b, undefined, {
+      numeric: true,
+      sensitivity: 'base',
+    }))
+    .forEach(key => {
+      next[key] = obj[key]
+    })
   return next
 }
 
diff --git a/packages/core/test/system.js b/packages/core/test/system.js
index 969e73c6c..9b72cdae1 100644
--- a/packages/core/test/system.js
+++ b/packages/core/test/system.js
@@ -257,9 +257,10 @@ test('sorts media queries when responsive object values are used', () => {
         sm: '32em',
         md: '40em',
         lg: '64em',
+        xl: '128em',
       }
     },
-    padding: { _: 16, lg: 64 },
+    padding: { _: 16, lg: 64, xl: 128 },
     margin: { sm: 4, md: 8 },
     color: { lg: 'tomato' },
   })
@@ -267,6 +268,7 @@ test('sorts media queries when responsive object values are used', () => {
     '@media screen and (min-width: 32em)',
     '@media screen and (min-width: 40em)',
     '@media screen and (min-width: 64em)',
+    '@media screen and (min-width: 128em)',
     'padding',
   ])
 })