mq-portal

A custom element to re-arrange the DOM based on media queries

Rationale

Because MS Edge doesn't support display: contents sufficiently yet, using display: grid and display: flex are insufficient to get a two-column layout where the parts interleave on mobile but have no vertical gaps on larger screens — a variation on the CSS Masonry problem.

This gives us the ability to rearrange the DOM declaratively and restore it (with some caveats) when the query no longer applies.

Use

Import this module, then

<mq-portal media="(max-width: 640px)" match=".target"></mq-portal>

Some other content

<div class="target">
This moves
</div>

Below 640px width, the DOM looks like this:

<mq-portal media="(max-width: 640px)" match=".target">
    <div class="target">
    This moves
    </div>
</mq-portal>

Some other content