bootstrap
bootstrap copied to clipboard
twbs
order-6 and above
Prerequisites
- [X] I have searched for duplicate or closed feature requests
- [X] I have read the contributing guidelines
Proposal
I used .order-1 and similar classes before this time, but only with 2-3 elements to change orders. In my actual project I tried to reorder 6 different blocks and after a little investigation I realized there isn't .order-6 class, and there isn't .order-7 etc.
I want to do this:
XS screen:
+---+
| B |
| A |
| E |
| D |
| F |
| C |
+---+
SM-LG screens:
+---+---+
| B | A |
| F | C |
| D | E |
+---+---+
XL+ screens:
+---+---+---+
| A | B | C |
| D | E | F |
+---+---+---+
Because we don't have .order-6 class (and .order-7, etc) it's very complicated to do this reordering and I run's into some property overwriting issues if I try to add custom classes.
Motivation and context
It sounds very illogical to me if we using 12 columns but can order only 5 cols. I understand there is only from p-0 to p-5 and m-0 to m-5 etc, but the ordering isn't based this 0-5 logic. Most based on columns what is based on number 12.
I believe you can use the .order-first and .order-last classes to help you here, as the first will go before order-1 and the rest would follow.
https://getbootstrap.com/docs/5.2/utilities/flex/#order
Additionally there are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 6, respectively.
I believe you can use the
.order-firstand.order-lastclasses to help you here, as the first will go before order-1 and the rest would follow.https://getbootstrap.com/docs/5.2/utilities/flex/#order
Sure, but what about .order-7 ?
I believe you can use the
.order-firstand.order-lastclasses to help you here, as the first will go before order-1 and the rest would follow. getbootstrap.com/docs/5.2/utilities/flex/#orderSure, but what about
.order-7?
Use .order-first and then .order-6 would be what .order-7 could be and .order-last would be .order-8 would be if you needed to go that far.
Hello, Daniel here. If i may, then i've had similar project's as Netdjw says. I've had in my case before where i needed up to 10 of the ".orders-" classes - isn't it possible to change this somehow in later updates? (asking because i know you have a 12-grid-block system, but would be nicer to have the option to somehow change this on your own if possible in future, in this case you can release your version of .order-(1-5) and at the same time, users will be able to add more?)
You can always override or modify the utilizes API to add more values for order. I'd recommend putting it in your own custom.scss file and compiling it with the rest of the bootstrap sccs.
https://github.com/twbs/bootstrap/blob/a685b9648bf14c853b9a417c7c68f95d93e1aabc/scss/_utilities.scss#L301-L314
$utilities: (
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
7: 7,
8: 8,
9: 9,
last: 10,
),
),
);
The idea behind not including every single order option for all 12 grid columns is one of necessity—why would you need to, or how frequently would you need to, set 12 columns' order? I can imagine some situations, but I most grid implementations aren't 12 individual columns, but rather a few (like a three or four col layout). It felt wasteful to generate every single order value here when folks can easily customize the build to include more if they really need it.
