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:

bootstrap/scss/_utilities.scss

Lines 335 to 348 in dcec1df

	"order": (
	responsive: true,
	property: order,
	values: (
	first: -1,
	0: 0,
	1: 1,
	2: 2,
	3: 3,
	4: 4,
	5: 5,
	last: 6,
	),
	),

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

• Enhancement (non-breaking change)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• 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]

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.

Approving since it's already better than the actual

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