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>