Bootstrap 12-grid component - SOLVED -

[patrick1645350822]

Hi,

I found documentation on bootstrap: https://getbootstrap.com/docs/4.0/layou ... er-classes showing that it is possible to order the columns depending on the screen width:

Reordering
Order classes
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

Is this supported by Servoy? I do not seem to get this working.

[jcompagner]

NG1 uses bootstrap 3: https://getbootstrap.com/docs/3.4/css/# ... n-ordering

TiNG uses bootstrap 5: https://getbootstrap.com/docs/5.2/layou ... er-classes (seems the same as bs4)

[patrick1645350822]

Thanx,

That did the trick. I did not start the solution in the correct mode. One tip. If using order for different sizes you need to set them all:
ie set the class: col-lg-6 col-md-6 col-sm-6 col-xs-12 order-lg-1 order-md-1 order-sm-2 order-xs-2

[jcompagner1660751177]

i want to mention that the col-xs-N and also the order-xs-N are not there anymore in bootstrap 4/5
they are col-N or order-N

[patrick1645350822]

Hi,

Thanks, I checked that and you are right. Thats a pity because I wanted a different sort for the 'phone' resolution.
The solution I now made was to swap the content of the container depending on the resolution.

[jcompagner]

no they didn't remove anything
they just renamed it..

"xs" always meant i think that the media breakpoint was 0px (or starting from 0)

until 576px (then sm kicks in) see: https://getbootstrap.com/docs/5.0/layout/breakpoints/

so when you use xs uust use without that prefix that is the same as using xs