Assume I have the following nesting:

<div class="cointainer-fluid">
   <div class="row-fluid">
      <div class="span3">
         <!-- left sidebar here -->
      </div>
      <div class="span9">
         <!-- main content here -->
      </div>
   </div>
</div>

I'd like to put an unknown number of <div class="span3"></div> in the main content area. (Each of the span3 is suppose to contain a product photo, name, price, etc.) Of course, my aim is that be responsive. So, I might display 20 products, which I'd like to possibly display 5 products per "row" on a wide screen, then 4 products per "row" on a slightly less wide screen, then 3, then 2, then 1. For example (each X represents a product):

Wide Screen
row 1: X  X  X  X  X
row 2: X  X  X  X  X
row 3: X  X  X  X  X
row 4: X  X  X  X  X

Less Wide Screen
row 1: X  X  X  X
row 2: X  X  X  X
row 3: X  X  X  X
row 4: X  X  X  X
row 5: X  X  X  X

Even Less Wide Screen
row 1: X  X  X
row 2: X  X  X
row 3: X  X  X
row 4: X  X  X
row 5: X  X  X
row 6: X  X  X
row 7: X  X

It seems like I need to do nested rows. However, if I do that, then I'll only be able to fit a certain amount of products in each nested row. That'll cause problems as the screen width decreases, for example (each X represents a product):

Wide Screen
row 1: X  X  X  X  X
row 2: X  X  X  X  X
row 3: X  X  X  X  X

Less Wide Screen
row 1: X  X  X  X
       X
row 2: X  X  X  X
       X
row 3: X  X  X  X
       X

How do I do what I want to do in Twitter Bootstrap?