Bootstrap is known for its grid-based system. My goal is to create a category page for products that can adapt to the screen size, allowing for as many DIVs as the screen will accommodate. Essentially, I want the number of DIVs to increase as the screen size increases, making it "reverse responsive."
Currently, I feel restricted by using a fixed number of DIVs based on Bootstrap's grid system. Is there a different approach I should take instead of relying on Bootstrap's layout features? If so, how can I achieve the desired flexibility?
For example:
On a smaller screen, it might look like this:
<div>
<div>content</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
</div>
<div>
<div>content5</div>
<div>content6</div>
<div>content7</div>
<div>content8</div>
</div>
But on a larger screen, it should adapt to:
<div>
<div>content</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
<div>content5</div>
</div>
<div>
<div>content6</div>
<div>content7</div>
<div>content8</div>
</div>
And on an even larger screen, the layout should adjust to:
<div>
<div>content</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
<div>content5</div>
<div>content6</div>
</div>
<div>
<div>content7</div>
<div>content8</div>
</div>
Is there any way to achieve this desired functionality?
Thank you!
UPDATE: For those in need of a visual representation, here is an image of my 4-column layout, but I would like it to expand to 5, 6, 7, or 8 columns on larger screens: