1

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:

...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.

Community
  • 1
  • 1
replygirl
  • 23
  • 8

1 Answers1

1

What you are asking for is already possible, continue to create the different div's with span* classes. As long as they are in the same row div you can use something like Masonry (http://masonry.desandro.com/) to force push the div into the gaps.

In your responsive class, using the standard bootstrap css should make each span* div a block forcing them into your desired layout.

David Nguyen
  • 7,953
  • 2
  • 27
  • 49