Float-based grid systems (like Bootstrap's) are great for quickly creating column-based layouts but sometimes rely on source order to position things correctly.
Until Bootstrap 4 is released with flexbox support, Teleport is a simple way to construct layouts not possible with standard responsive design.
Try resizing the page to see the boxes stack correctly on mobile
Boxes stack correctly on mobile but the desired layout isn't possible for desktop
We have our desired layout on desktop but our single-column hierarchy is wrong on mobile (and for screen readers)
Here is the HTML for the Desired Result example above:
<div class="row"> <div class="col-sm-4"> <p>Source order: 1</p> <div data-teleport="red sm"></div> </div> <div class="col-sm-8"> <p>Source order: 2</p> </div> <div class="col-xs-12" data-teleport="red xs"> <p>Source order: 3</p> </div> </div>
The content from
red xs is teleported to
red sm when the viewport crosses the
$screen-sm-min Bootstrap breakpoint. You can define as many placeholder elements as you
like with an identifier (.e.g
red) followed by
xs, sm, md or
I've been lazy packaging up the assets for others to use. Shout at me on Twitter if you need them in another format and I'll see what I can do.
For example, if your content is in the XS placeholder by default (which I recommend - mobile first) then you can do:
<div class="visible-xs-block" data-teleport="id xs">
<noscript> if necessary though.