Balance width of objects with JavaScript

I have a list of objects which I print in my template with

each object in objects
  <div class="col-md-4">..</div>

I use Bootstrap, so col-md-4 means that the div element should take up 1/3 of the space.

But I want the 4 in col-md-4 to be random. But I want it such that 1, 2 or 3 elements are taking up the entire row (should sum to 12).

So I want it to be either

  <div class="col-md-4">..</div>
  <div class="col-md-4">..</div>
  <div class="col-md-4">..</div>

or

  <div class="col-md-8">..</div>
  <div class="col-md-4">..</div>

or

  <div class="col-md-4">..</div>
  <div class="col-md-8">..</div>

or

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

or

  <div class="col-md-12">..</div>

This is almost what most online newspapers look like. But I don't know how to balance it.

I guess I should take the entire array objects and randomly choose how many rows to make. If I have 15 elements, I can do at most 15 rows (each with col-md-12) and I must do at least 15/3 = 5 rows, so the number of rows should be inbetween. Then I need to decide for each row how many columns it should have and then balance each of the objects width such that the elements in the specific row sum to 12.

How can I do this? Also, on most newspaper websites, it seems the sizes of the different articles are not completely random (as my script would be), so how can they have random sizes although they are not changing often? I guess I could obtain this by using the creation time of the object or something to determine their size?

To be more specific, I don't have to encapsulate the columns in rows. I just need to make sure that succeeding objects sum to 12.

So if I have 5 objects, they need, for instance, to be printed with

col-md-12
col-md-4
col-md-4
col-md-4
col-md-12

or

col-md-8
col-md-4
col-md-4
col-md-4
col-md-4

So I guess it's enough to:

• For the first object, choose a random width
• For all succeeding objects, decide whether it is possible to fill up the width with more than 1 extra column - and choose randomly to either fill up the row or choose a width such that another column can fit

Therefore, I will need a variable that always stores the widths of the 3 last printed objects (and if they sum to 12, I know that I am about to create a new row).

via Jamgreen