Flexbox order of precedence issue

[owenandrews]

I've noticed that when using the media query extensions on the flexbox module in conjunction with the display module, they don't seem to behave as expected. I would expect the below code to display flex on large displays and display none on all other sizes, but instead it stays permanently hidden. <div class="dn flex-l">Foo bar<div>

[dangayle]

https://github.com/tachyons-css/tachyons-sass/pull/31

[papiliond]

It's ok that the precedency has changed, but how to achieve the functionality that @owenandrews mentioned?

[foureyesup]

Hi - any updates on this? I see there is a PR open to reverse this, which is causing the opposite problem. In the current state, .dn will override .flex-ns, which is breaking our design...

[MindSculpt]

@papiliond @owenandrews Until the pull request is accepted, you can easily get around this by:

1. Creating a local _tachyons-sass.scss file in your project
2. Copying the tachyons-sass manifest file's contents into your new _tachyons-sass.scss partial locally (be sure to update the paths based on where your node_modules folder is
3. Swapping the order of the display and flex partial imports in your custom partial

Then, when this is working correctly, your element class lists for responsive flexbox layouts should look something like <div class="dn flex-m flex-l">Hidden only on small screens<div>

I can't think of any reason the precedence should have changed if tachyons wants to support mobile-first flexbox layouts, other than being able to dynamically add the dn class to hide & show elements. Tachyons should introduce a .hide class instead that comes last in the cascade (or you can just make your own class to do this in your project).