József Kazár József Kazár - 16 days ago 5
CSS Question

Rearrange bootstrap grid into different numbers of columns without code duplications

I have a problem with dinamiacally rearranging my div boxes.

I need two version:

mobile (one column beneath each other):

<div>A</div>
<div>B</div>
<div>C</div>


Any other (the middle one slides out from between the two others):

<div class="col-lg-4">
<div>A</div>
<div>C</div>
</div>
<div class="col-lg-8">
<div>B</div>
</div>


I can manage this with code duplications and visible/hidden pairs, but is there a solution without these? Especially I don't want code duplications...

Thanks,

edit:

unluckily, I forgot to add there is another complication:

I need several 100% width elements under this whole ABC thing, and I don't know the exact height of the B element...

This setup shows that the D and the B overlaps. I want to position the D under the B...:

<div class="container">
<div class="row parent-row">
<div class="col-lg-4 div-wrap">
<div class="a">A</div>
<div class="b">B<br>B<br>B<br>B<br>B</div>
<div class="c">C</div>
<div class="d">DDDDDDDDDDD DDDDDDDDD DDDDDDDDDDDDDDDDD DDDDD DDDDDDDDDDDDDDDDDD DDDDDDDDDDDDD DDDDDDDD DDDDDDDDDDDDDD</div>
</div>
</div>
</div>

@media (min-width: 1200px) {
.b{
position:absolute;
top: 0;
right:0;
width: 66.66666667%;
padding-right: 15px;
padding-left: 15px;
min-height:1px;
}

.d{
position:absolute;
right:0;
width:100%;
padding-right: 15px;
padding-left: 15px;
min-height:1px;
}


.div-wrap{
position:initial;
clear:both;
}

.parent-row{
position:relative;
clear:both;
}
}

Answer

See if this will do the trick for you: http://codepen.io/panchroma/pen/xRqgJe

The important bit is that when the viewport is wider than the stacked mobile view, you use a media query to take div 'B' out of normal flow by applying 'position:absolute'. And at the same time you manually apply the Bootstrap CSS styling for a 'col-lg-8' div, and you also tweak the positioning of its parents (.div-wrap and .parent-row) so that .B floats to the correct position.

Good luck

HTML

<div class="container">
  <div class="row parent-row">
    <div class="col-lg-4 div-wrap">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
   </div>    
  </div>
</div>  

CSS

@media (min-width: 1200px) { 
  .b{
    position:absolute;
    top: 0;
    right:0;
    width: 66.66666667%;
    padding-right: 15px;
    padding-left: 15px;
    min-height:1px;
  }

  .div-wrap{
    position:initial;
  }

  .parent-row{
    position:relative;
  }

}