Bootstrap 4 grid system on retina screen

Question

i have div like this:

<div class="col-lg-4 col-xl-4 col-md-6 col-sm-12 px-0 p-4">

When i test it on 27' screen it uses col-xl-2 and it works perfect, but when i test it on 13' screen of macbook pro with retina screen it uses col-xl-2 too and it looks weird. How i can handle this stuff and specify column size for retina screens?

Answer 1

Try:

col-md-4

or

col-sm-4

Bootstrap documentation (Grid)

Update

The large screen is detected due to the high resolution of the retina display.

You can set your own breakpoints in Bootstrap.

Customizable Bootstrap 3.3

Maybe this answer could point you to the right direction.

Alternatively try this (source):

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}