Col xs={false} should be !important

[mschipperheyn]

<Col xs={false} [...] should lead to a style value of display: none!important.

The reason is that if you create a display: flex setting for the column for normal operations, it will override display: none for xs screens. And xs={false} is a hard rule.

[LoicMahieu]

I encounter this problem too but display: none !important will leads to other problems. Try yourself by simply adding:

diff --git a/src/components/Col.js b/src/components/Col.js
index 2f06d0a..f2e7f4c 100644
--- a/src/components/Col.js
+++ b/src/components/Col.js
@@ -59,7 +59,7 @@ export default styled(Col)`
           display: block;
         `
         // Hide element
-        : 'display: none;'
+        : 'display: none !important;'
       )
     }`)
   }

And see the last example in demo, the Col will never be visible:

Due to !important weight... I don't have solution at this time but I am really open to propositions ;)

[mschipperheyn]

I suppose the media selector for display: none !important could indicate a max width: 64em. But for larger screens you would need to define a min-width AND a max-width for this case.

Another option might be the @supports selector. https://developer.mozilla.org/en/docs/Web/CSS/@supports @supports not (display: block)

Just thinking out loud. Not sure if this would not lead to more/other problems.