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".

The item order can be reset to the default order related to the HTML structure at larger breakpoint if needed. Use reset@from-* when the order should be default again.

Please note that the reset option works only when first or last option is used. Do not laverage options for the same breakpoint like "first@from-small" and "reset@from-small" as this cannot work.

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>