Bolt Design System

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

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>