Page 1 of 1

Bootstrap 12-grid component - SOLVED -

PostPosted: Wed Aug 10, 2022 11:57 pm
by 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.

Re: Bootstrap 12-grid component

PostPosted: Thu Aug 11, 2022 9:36 am
by jcompagner

Re: Bootstrap 12-grid component - SOLVED -

PostPosted: Wed Aug 17, 2022 5:22 pm
by 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

Re: Bootstrap 12-grid component - SOLVED -

PostPosted: Wed Aug 17, 2022 5:49 pm
by 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

Re: Bootstrap 12-grid component - SOLVED -

PostPosted: Wed Aug 17, 2022 10:58 pm
by 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.

Re: Bootstrap 12-grid component - SOLVED -

PostPosted: Thu Aug 18, 2022 1:24 pm
by 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