0

I'm adding different sized divs dynamically to a fluid container. Container already put them correctly into two columns one to the left then one to the right and so on. Unfortunately I cannot stick them together in the left column if in that row the div on the right side is bigger. I forked a fiddle for this to show what I'd like to achieve:

html:

<div class="container-fluid">
<div class="row-fluid">
    <div class="col-xs-6">
        1
    </div>
    <div class="col-xs-6">
       2
    </div>
    <div class="col-xs-6 label-warning">
       3
    </div>
    <div class="col-xs-6">
      4<br/>
      s<br/>
      s<br/>
      s<br/>
      s<br/>
      s
    </div>
    <div class="col-xs-6 label-success">
      5
    </div>
    <div class="col-xs-6">
      6
    </div>
</div>

http://jsfiddle.net/aqj48y2y/4/

Now in this I'd like 5 and 6 to show up right under 3 next to the box 4 somehow. In this scenario I didn't use any column so if I put in another div it will show up under the box 5 and if I put another one that will show up under 6 which is correct for me. The question is that can I achieve to put 5 and 6 under 3 so let's say stack them together? Show them like a justified text?

Thanks in advance.

jgrasl
  • 21
  • 2
  • i think i have 2 way, first: to create column on put 3,5,6 on one of it, and 4 on the another. second: use some of libraries like [mansory](http://masonry.desandro.com/) – Shayan Apr 23 '16 at 08:30
  • Thanks. I already tried to add them in two columns but unfortunately if the divs in the right column are really big and on the left they're small it looks weird. I'll take a look on masonry. – jgrasl Apr 23 '16 at 08:57

0 Answers0