1

I've been fiddling with this issue for almost 8 hours and I gave up...

Check the images; my client wants a Bootstrap-grid that has two columns (or at least they must look like columns).

On bigger screens, you see two columns - contain DIV's with different (and dynamic) height.

big screen - two columns

On a small screen, the columns must disappear and the DIV's must be placed from "A" to "Z" (well... "F" actually).

small screen - no columns

How it this technique called? Or how can I get this done, using Bootstrap 3 - but without CSS3 (Android 4 must support it) or JS / jQuery?

I've been playing around with the pull-left / col-md-push-6 / etc... classes, but the biggest problem is that each DIV has a different height and you never know what the height is.

YvesLeBorg
  • 9,070
  • 8
  • 35
  • 48
El Bandito Dorito
  • 51
  • 8
  • how can we re-code seeing just your picture? – Bhojendra Rauniyar Jul 15 '15 at 10:33
  • I understand your question, but none of my codes are working in the way I want... So I want to start from scratch; even without Bootstrap when needed... I am even not sure this layout can be done, without JS... – El Bandito Dorito Jul 15 '15 at 10:46
  • Duplicate - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css. Simply, even flexbox can't do **exactly** what the OP requires. – Paulie_D Jul 15 '15 at 11:08
  • If it can't be done using regular CSS, I'll tell my client so... Maybe I can force him to use the Mansonry-script; but I don't like the idea to use scripting for styling (from a pure developers point of view, that is...). – El Bandito Dorito Jul 15 '15 at 11:21
  • For those who are interested; I came up with this; http://jsfiddle.net/Lf8jojb4/9/ (not my code - but with a little help from a friend). Just resize the preview-pane to see the script in action. – El Bandito Dorito Jul 16 '15 at 19:59

0 Answers0