4.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
<div class="layout-swap">
<div>This element comes <strong>first</strong> in the HTML source order.</div>
<div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
</div>
Source:
layouts/layout-swap/_layout-swap.scss, line 4