Having a web page layout with a main content area and a fixed-width sidebar is proving to be a challenge. I want the content displayed in both sections to be responsive, adjusting based on the size of their respective parent divs rather than the screen size. However, Bootstrap seems to dictate the layout based on screen size (col-md-* vs. col-sm-*) rather than individual div sizes, causing them to display the same layout.
Is there a way to make the HTML in the fixed-width sidebar (set at 300px) follow the col-sm-* / col-xs-* layout? Or do iframes provide the only solution, despite their formatting issues and content separation requirements?
If there's an alternative method to making HTML content responsive to its parent div instead of the overall screen size, please share your insights!
Thank you for any suggestions or guidance!