Dfyjkt

I'm not expert in styling, I'm using bootstap for small projects.
So, my problem is the grid system. I have two monitors, first has 1920x1080 resolution and second has 1366x768.
I want say with mediaquery if the resolution is 1366x768 use the grid system of md not lg

For example I have a div as in the below

<div class="col-lg-9 col-md-6">
....
</div>

div class="col-lg-3 col-md-6">
...
</div>

Is it possible?

In bootstrap3, you can use col-lg class for your devices that are equl to 1200px or more and col-md class for your devices that are equal to 992px or more. Similarly in bootstrap 4 you can use col-lg class for resolution that is equal to 992px and more and col-md class for col-md for 768px or more. You can find full bootstrap grid documentation on its official site https://getbootstrap.com/docs/3.3/css/#overview-container (for bootstrap 3).

In your case im going through boostrap version 3. If you want to use col-md class on resolution of 1366X768 or more obviously you want to use col-lg class on resolution of 1920x1080 or more as you said you have two monitors. If so simply go to customize section of bootstrap official site i.e. https://getbootstrap.com/docs/3.3/customize/ Then scroll down there you will find Media queries breakpoints section. You can customize your own breakpoints from there by simply fill @screen-lg labeled input box with 1920px and @screen-md labeled with 1366px. Now you can go to the bottom of this page then simply click commpile and download button. Now you can use this downloaded bootstrap file that might work for you. Similarly each and every thing you can customize as you want by editing these less variable.

If I understand the question correctly , you can do this with JQuery . Something like this :

if (window.matchMedia('(min-width: 1025px )').matches) 
 high.css('height', maxheight - 3);
 boxOne.css('height', maxheight);
 boxTwo.css('height', maxheight);
 boxThree.css('height', maxheight + 23);
 
 else if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) 
 high.css('height', maxheight - 11);
 boxOne.css('height', maxheight);
 boxTwo.css('height', maxheight);
 boxThree.css('height', maxheight + 23);