This layout is in a testing phase, do not use any code examples from the docs for production sites.
Content Order of Individual Layout Item Bring the layout item to the start or the end of the layout. Important Notes: Only use this if the order of layout items need to be adjusted at specific breakpoints. The @from-* keywords mean "starting from a particular breakpoint". Reference the schema for all options. Layout schema Demo
Layout item (this will come last once the viewport is larger than the small breakpoint)
Layout item
Layout item
Twig
{% set layout_items %} {% include '@bolt-layouts-layout/layout-item.twig' with { content: 'Layout item (this will come last once the viewport is larger than the small breakpoint)', order: 'last@from-small', } only %} {% include '@bolt-layouts-layout/layout-item.twig' with { content: 'Layout item', } only %} {% include '@bolt-layouts-layout/layout-item.twig' with { content: 'Layout item', } only %} {% endset %} {% include '@bolt-layouts-layout/layout.twig' with { content: layout_items, template: 'thirds@from-small', } only %}
HTML
<bolt-layout template="thirds@from-small"> <bolt-layout-item order="last@from-small"> <!-- Content goes here --> </bolt-layout-item> <bolt-layout-item> <!-- Content goes here --> </bolt-layout-item> <bolt-layout-item> <!-- Content goes here --> </bolt-layout-item> </bolt-layout>