Overlapping Rows/Columns Using Bootstrap Grid

Question

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 hide and allow the one underneath it to slide up to make it seem like they are on the same row (even though they aren't). Any help is greatly appreciated!

Here is what I would like to achieve:

Attempted Solutions:
Without the use of rows, off-setting the top columns to create space on the left for the one below to fill :

<form id="1">
  <div class="col-md-4 col-md-offset-4">
    <div class="panel panel-default">
      <div class="panel-heading">Hello</div>
      <div class="panel-body">Content here..</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Hello</div>
      <div class="panel-body">Content here..</div>
    </div>
  </div>
</form>

<form id="2">
  <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>
  <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>
  <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>
</form>

Using rows, giving the first column a height of 0px also a display: none.

<div class="row">
  <form>
   <div class="col-md-4" style="height: 0px;"></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>
   <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>
  </form>
</div>

<div class="row">
 <form>
   <div class="col-md-4">
     <div class="panel panel-default">
        <div class="panel-heading">E</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>
   <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>
  <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>
 </form>
 </div>

Answer 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

Answer 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>