Chrome now has support for display:contents;
It looks like it was released on March 5, in version 65.
display: contents causes an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
A few months ago I found myself in a situation where an extra wrapping div was needed in a flexbox layout for desktops. However, on mobiles the extra div needed to be removed to change the display order. The answer to the problem was display:contents;
It’s good to know that it is supported in Chrome and Firefox now, hopefully that will put some pressure on Edge to get caught up. 
Click on the HTML or CSS button below and it will change the layout width, then you will see the media query kick in.