Docs: precise how to add new `.order-*` classes in 'Layout > Columns'

[julien-deramond]

Description

This PR suggests improving our documentation to fix #40816.

The following sentence is IMO misleading as we don't have Sass variables handling this set or .order-* utilities:

If you need more .order-* classes, you can modify the default number via Sass variable.

Internally, these utilities are generated thanks to:

https://github.com/twbs/bootstrap/blob/dcec1df61f107e2b449486aafefbb1d14abe0333/scss/_utilities.scss#L335-L348

So this PR improves the explanation by creating a dedicated paragraph that actually explains how to add a new .order-{breakpoint}-{number} utility.

Type of changes

• [x] Enhancement (non-breaking change)

Checklist

• [x] I have read the contributing guidelines
• [x] My code follows the code style of the project (using npm run lint)
• [x] My change introduces changes to the documentation
• [x] I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• [x] All new and existing tests passed

Live previews

• https://deploy-preview-40821--twbs-bootstrap.netlify.app/docs/5.3/layout/columns/#order-classes

Related issues

Closes #40816

[TobiGr]

Thank you! This adds the missing info to the docs. Problem solved.

[louismaximepiton]

Tried something to follow our API guide on how to modify utilities. Feel free to revert it.

I like it, just wondering if we should link or paste the same information in here: https://main--twbs-bootstrap.netlify.app/docs/5.3/utilities/flex/#order.

Definitely not, since we don't do it on other utilities pages.

[julien-deramond]

Thanks for the proposal @louismaximepiton. It's indeed working like that. The only thing I saw is that .order-last is generated before .order-6 in the list; but that's not an issue. Let's go with this solution.