I'm using Bootstrap to create a responsive website with a lot of variable-height content in a two-column grid. Currently everything is fine functionally, but I'd like to get rid of the ugly white space between rows that occurs when the two items in one row are of a different height. I can easily do this by just having two span6 divisions and independent rows in each one, but the problem is that Bootstrap's grid stacking for small displays will stack all of the left column above the right column, whereas the information is supposed to flow left to right, then top to bottom.
For solutions I've found the following threads:
- Is it possible to create a pinterest-like layout with Bootstrap only?
- Bootstrap: How to change the order of div in fluid-row?
...as well as a few other obscure answers, but none of them work for me as I'd like to make no server-side changes to how pages are rendered; rather, I want to see if there is a way for me to solve this issue by modifying only the HTML, CSS, and JS, that is I want to find a solution that concerns Bootstrap entirely. I'm open to any additions to the HTML, CSS, and JS, but like I said, nothing server-side.
I've whipped up a table that visualized what I'm working with, what the problem is, and what I'd like to accomplish. See it at http://i.imgur.com/AAl9ZBu.png.
Thanks so much for your help.
UPDATE: I've come up with a fairly simple idea to fix this: Use the two-column paradigm on the solution that fixes the desktop layout but breaks the mobile layout, with duplication on every second grid item and toggling display between the two of them. For example, a four-item grid would have items 1, 2, 3, and 4 in the left column, with items 2 and 4 set to display:none, and the right column contains items 2 and 4. When @media(max-width:767px) becomes true, items 2 and 4 in the left column toggle on and display:none is applied to the entire left column.
This is probably the least efficient solution possible, so I'd still love to read your solutions.