I have incorporated bootstrap into my home page layout with a main content column occupying 9 units and a sidebar column taking up 3 units. Within the sidebar, I have set the div element to have a position of fixed. When viewed on smaller screens, Bootstrap moves the sidebar to the bottom, which is fine. However, in that scenario, I require the sidebar's position to be relative instead. I am currently utilizing JavaScript to monitor screen width changes and adjust the position property accordingly. My concern is that Bootstrap may shift the sidebar below when the screen size is less than 972 pixels. Is there a way to accurately determine the exact width at which Bootstrap will reposition the sidebar? Any assistance would be greatly appreciated. Thank you. Alternative methods are also welcome.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div class="content"></div>
</div>
<div class="col-md-3">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
The script:
$(document).ready(function () {
if ($(window).width() > 972) {
$('.sidebar').css('position', 'fixed');
}
});