Inside "row row-cols-*", width determination for "col" when there's sibling "col-*"

Solution 1:

It's a common misconception.

row-cols-* sets the columns on the row.

So for example: row-cols-4 would mean the row should be divided into 4 columns, thus each column would implicitly be a col-3. Now, when you do a row-cols-4 and put col, col, col-6 and col inside it, you are giving the 3rd column (col-6) double of what is assigned to each column in the row. Now what you thought was this would distribute the remaining 6 columns into 3 and give 2 to each of the remaining. That isn't so. The other columns still get 3 column spaces. Because that is what we assigned as a minimum when we did row-cols-4. Anything extra will wrap, as it is doing.

I hope this clears something up.