html - Overlapping Rows/Columns Using Bootstrap Grid -

issue: attempting create layout. need in 2 forms. since unable nest forms, have been trying use styling top left col-md-4 hide , allow 1 underneath slide make seem on same row (even though aren't). appreciated!

here achieve:

attempted solutions:
without use of rows, off-setting top columns create space on left 1 below 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 first column height of 0px 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> 

i have tried using jquery masonry plugin.

just used wrapper whole of markup , achieved needed using little js initialization plugin.

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

please have @ fiddle. looks bit ugly, though purpose solved.

note: have not used bootstrap classes.

code

full screen fiddle