I am using Unsemantic CSS Grid framework to create a layout that looks something like this (simplified to make question clear):
What you are looking at here is 3 rows, each with 2 columns. The code looks roughly like this:
<!-- First row -->
<div class="grid-50">
Title 1
</div>
<div class="grid-50">
Title 2
</div>
<div class='clear'></div>
<!-- Second row -->
<div class="grid-50">
<img src='image1.png' />
</div>
<div class="grid-50">
<img src='image2.png' />
</div>
<div class='clear'></div>
<!-- Third row -->
<div class="grid-50">
Text paragraph here
</div>
<div class="grid-50">
Another paragraph of text
</div>
<div class='clear'></div>
The great thing about using 3 rows is that even if image 1 and image 2 are not the same height, the paragraph of text below them lines up across the two columns (meaning it starts at the same vertical position in both columns) since I use a 'clear' after the images. If I had instead used 1 single row with 2 columns, where each column is a div that has a title, image and paragraph text one on top of the other, then the paragraph text would not line up if the images had different heights. So using 3 rows gives me exactly what I am looking for.
Unfortunately when viewed on a mobile device this is what happens:
This is because the two columns of each row end up on top of each other.
What I would instead like to get is this:
In other words, I want row1col1, row2col1 and row3col1 to stick together, and then row1col2, row2col2 and row2col2 to appear below.
How do I go about doing this? Is there anything in Unsemantic that allows me to "tie" a column together.
If I instead create 2 divs with title,image and text para, and put them in 1 row, that will solve this issue, but then the text paragraphs will NOT line up if the images are different heights. I cannot hard code the height because this is a fluid layout, and when the width of the page changes the width of the columns will change, which in turn will change the width of the images (since their width is set to 100% of container) and consequently their heights will change. Any tricks, workarounds or suggestions to get this approach working would be most helpful.
As a last resort I am thinking of using jQuery to position the paragraph text on page resize; if you feel that is a good solution (or the only solution) please feel free to share any recommendations or pitfalls to watch out for in this approach.
