Overlapping Rows/Columns Using Bootstrap Grid

Issue: Attempting to create this layout. I also need it to be in 2 forms. Since you are unable to nest forms, I have been trying to use some styling to get the top left col-md-4 to

Solution 1:

I have tried using jQuery Masonry plugin.

Just used a wrapper for whole of your markup and finally achieved what you needed using little JS initialization for the plugin.

$('#grid').masonry({
   columnWidth: 320,
   itemSelector: '.grid-item'
  });

Please have a look at the fiddle. It looks a bit ugly, though the purpose is solved.

Note: I have not used bootstrap classes.

Code

Full screen FIDDLE

Solution 2:

I think i fixed it with this, you were using to many columns.

<div class="row">  
  <form id="form1" style="display: inline;">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
    </div>
  </form>


  <form id="form2" style="display: inline;">
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">Title</div>
        <div class="panel-body">Content here..</div>
      </div>
    </div>
  </form>
</div>