Mirage: BGA styles

3.3 layouts.layout-swap Layout swap

Uses absolute positioning and selective padding to make 2 elements appear to swap places in the visual order while maintaining their original HTML source order.

Example

This element comes first in the HTML source order.

This element comes second in the HTML source order.

Markup: layouts/layout-swap/layout-swap.twig

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-swap"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>This element comes <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>first<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> in the HTML source order.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"layout-swap__top"</span>&gt;</span>This element comes <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>second<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> in the HTML source order.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span>

Source: layouts/layout-swap/_layout-swap.scss, line 4