How to overlap panel from one row to another row? - html

Question

I have these panels inside different rows. To easily show my problem, and my desired output, here's a visual...
At the left side is the problem I encounter, and at the right side is the desired output. I was wondering how it's possible to make the right panel overlap to the other row.
My html's structured something like this, which is all inside a .container-fluid(if that contributes to the problem)...
<div class="row">
<div class="col-md-6">
<div class="panel"> <!-- top-left panel --> </div>
</div>
<div class="col-md-6">
<div class="panel"> <!-- right panel --> </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel"> <!-- bottom-left panel --> </div>
</div>
</div>
I'm using bootstrap.
p.s. sorry for the html "sample", not familiar yet on how to use the html snippet

Answer 1

Use flex
.flex{
display:flex;
}
.flex-1{
flex:1;
}
.height-50{
height:50px;
}
.margin-r-15{
margin-right:15px;
}
.border-1px{
border:1px solid black;
}
<div class="flex">
<div class="flex-1 margin-r-15">
<div class="height-50 border-1px" >
</div>
<div class="height-50 border-1px">
</div>
</div>
<div class="flex-1 border-1px">
</div>
</div>

Answer 2

You can code left div's in one wrapper and right one in another.
HTML
<div class="row">
<div class="col-md-6">
<div class="panel">
//top left panel
</div>
<div class="panel">
// bottom left panel
</div>
</div>
<div class="col-md-6">
<div class="panel">
// right panel
</div>
</div>
</div>
According to your visual above html will be fine but heights are not managed in this.
If you wish to have same height of right box according to left main box then use follwing code
HTML
<div class="row main">
<div class="col-md-6 inner">
<div class="panel">
//top left panel
</div>
<div class="panel">
// bottom left panel
</div>
</div>
<div class="col-md-6 inner">
<div class="panel">
// right panel
</div>
</div>
</div>
CSS
.main{
display:flex;
}

Answer 3

Please try like this:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
</div>

Answer 4

Please try this:
<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12 col-s-12">
<div class="col-lg-12 col-md-12">
//Your Content Here
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
//Your Content Here
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
//Your Content Here
</div>
</div>
</div>

Answer 5

If you can use separate columns (as shown in Gaurav's answer) that will work. If the height of the panels is unknown (variable) here isn't really a simple way. Another option is to put all your cols in a single row and use CSS3 column-width..
.row {
-moz-column-width: 50em;
-webkit-column-width: 50em;
-moz-column-gap: .1em;
-webkit-column-gap: .1em;
}
.col-md-6 {
float:none;
display: inline-block;
margin: .1em;
width: 100%;
}
http://www.bootply.com/6ynLAwenzq