Essentially, I have a series of twitter-bootstrap square divs with classes like col-md-x, col-sm-x stacked together to form an image list. It's functioning smoothly for the most part. However, there are instances (which remain a mystery to me) where the last item wraps to the next row and the preceding item floats right instead of left as specified in the code.
Additionally:
- All blocks have equal height
- Upgrading to v4 is not feasible due to having 200 other widgets :)
- The nth selector won't work as the number of columns varies based on screen size
I've attempted adding clearfixes within the blocks and restructuring everything using inline-blocks. I also tried switching to table-like displays without success. Including .rows is not an option since the number of columns differs across various screen resolutions.
The issue persists across the latest versions of FF and Chrome.
The provided code has empty blocks for clarity, with only the last block containing actual thumbnail code:
<div class="maslosoft-gallery-thumbs">
<!-- Code here -->
</div>
I'm unable to replicate the issue to create a fiddle. The problem can be observed here by scrolling to the bottom .
Attached below is a screenshot:
https://i.sstatic.net/JTqki.jpg
Please note that I'll be offline over the weekend and won't be able to respond until Monday.