0

I'm creating a bootstrap responsive app to work on both desktop and mobile. I'm struggling to get one of my pages to display as-desired in both formats. I'd like it to look like the diagram below, but collapse to a single column with cells in the order of the numbers (1,2,3,4).

+------------+ +---------------+
|            | |               |
|            | |               |
|            | |       2       |
|            | |               |
|      1     | |               |
|            | +---------------+
|            | +---------------+
|            | |               |
+------------+ |       4       |
+------------+ |               |
|            | +---------------+
|      3     | 
|            | 
+------------+

Right now, it looks like the diagram below:

+------------+ +---------------+
|            | |               |
|            | |               |
|            | |       2       |
|            | |               |
|      1     | |               |
|            | +---------------+
|            |
|            |
+------------+
+------------+ +---------------+
|            | |               |
|      3     | |       4       |
|            | |               |
+------------+ +---------------+

which can be achieved using this code:

  <div id="firstrow" class="row">
    <div class="col-sm-8">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
  </div> <%# End firstrow %>

  <div class="row">
    <div class="col-sm-8">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
  </div> <%# End secondrow %>

I can get the desktop format right if I just use two columns, but then it would not collapse in the order I want (would be 1,3,2,4). I thought removing the "row" divs might help, but that appears to yield the exact same desktop format result.

Any thoughts on how this can be achieved, either using bootstrap (preferred) or custom CSS?

Cheers,

-Hamish

Hamish
  • 101
  • 1
  • 3
  • possible duplicate of [CSS Floating Divs At Variable Heights](http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights) – nolawi May 13 '14 at 19:50
  • 1
    here is a solution: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout – nolawi May 13 '14 at 19:52
  • thanks @nol, don't think it's a duplicate but I agree that masonry looks like it can play a role in the solution. The effort/benefit is not there for me at the moment but I appreciate your pointing me in the right direction. – Hamish May 14 '14 at 17:14

0 Answers0