Two column elements of variable height stacking using bootstrap

Question

I'm using bootstrap to populate elements(div blocks with text content) in two columns by floating left and right and using 'clear', alternatively on each element. Depending on the height of each element, there are gaps between two stacked elements only on the right column.

I'm not sure how to get around it. Here is the code I've used: 

.wrapper{
  width: 1000px;
}
.cl{
  clear: left;
}

.cr{
  clear: right;
}

.bubble{
  width: 400px;
  box-sizing: border-box;
  display: block;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  
}

.fl{
  float: left;
}

.fr{
  float: right;
}

<div class="wrapper">
  <div class="col-mde-6 bubble fl cl">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but </p>
  </div>
  
  <div class="col-mde-6 bubble fr cr">
    <p>      
    asdasd ad asd asd as
     </p>
  </div>
  
  <div class="col-mde-6 bubble fl cl">
    <p>
      
    rem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always
     </p>
  </div>
  
  <div class="col-md-6 bubble fr cr">
    <p>
      n in some form, by injected humour, or randomised words which don't loo  </p>
  </div>
  
</div>

There is also a codepen here to illustrate my problem. Is there anyway to accomplish this?

http://codepen.io/falc0nit3/pen/aOamLY

I also noticed on RT site they use a similar technique and have the same problem under their critic and audience reviews section.

Edit: The ordering of the elements matter and the goal is when the browser is resized to a smaller window, the elements on the right column get merged below their immediate left column elements. So the actual ordering remains consistent. Think of any 2 column comment system where the top elements have higher priority than lower ones.

Answer 1

i've come back for round 2, this time taking into account the intended order of the sections and this is the solution that i've come up with. you might have to adjust the actual value of the width of the screen comparison when it switches from medium screen to small screen, etc. but this should give you the general gist.

again, utilizing jquery (since you have not objected to it)

$(document).ready(function() {
    
    $(window).on('resize', function() {
        console.log($(this).width());
        if ($(this).width() < 975) {
            $('.first .sec1').each(function () {
                var elem = $('.second .sec2:first-child');
                $(this).after(elem);
            });
        }
        else {
            $('.sec2').each(function() {
                $(this).appendTo('.second');
            });
        }
    });
    
    $(window).trigger('resize');
    
});

.section {
    margin-top:5px;
    padding:5px;
    border: 1px solid lightgray;
    display:inline-block;
    width: 100%;
}
.col-md-6 {
    padding:5px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="col-md-6 first col-sm-12">
        <div class="section sec1">
            SECTION 1: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
        <div class="section sec1">
            SECTION 3: I have content here. I have content here.
        </div>
        <div class="section sec1">
            SECTION 5: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
        <div class="section sec1">
            SECTION 7: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
        </div>
    </div> <!-- first -->
    
    <div class="col-md-6 second col-sm-12">
        <div class="section sec2">
            SECTION 2: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
        <div class="section sec2">
            SECTION 4: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
        <div class="section sec2">
            SECTION 6: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
    </div> <!-- second -->
</div> <!-- container -->

Answer 2

This answer has jquery in it. I understand that it's not what you explicitly asked for, but if you're open to it, here it is:

it doesnt alternate systematically (1 left col, the next right col, the next left col). it measures the height of the columns and places the next section into the shortest column to balance out their heights better.

http://jsfiddle.net/swm53ran/296/

$(document).ready(function() {
    var first = $('.first');
    var second = $('.second');

    $('.toBePlaced > .section').each(function () {
        var height = $(this).height();
        var lowest = first;
        if (first.height() < lowest.height()) { lowest = first; }
        if (second.height() < lowest.height()) { lowest = second; }

        $(this).appendTo(lowest);
    });
});

<div class="container">
    <div class="col-xs-6 first">
        <div class="section">
            SECTION 1: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
    </div> <!-- first -->
    <div class="col-xs-6 second">
        <div class="section">
            SECTION 2: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
    </div> <!-- second -->
</div> <!-- container -->

<div class="toBePlaced col-xs-4">
    <div class="section">
        SECTION 3: I have content here. I have content here.
    </div>
    <div class="section">
        SECTION 4: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
    </div>
</div>

Answer 3

Try putting each column into a containing div:

<div class="wrapper">
  <div class="col-mde-6 fr cr">
   <div class="bubble">
    <p>      
    asdasd ad asd asd as
     </p>
  </div>
  <div class="bubble">
    <p>
      n in some form, by injected humour, or randomised words which don't loo  </p>
  </div>
  </div>
  <div class="col-mde-6 fl cl">
  <div class="bubble">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but </p>
  </div> 
  <div class="bubble">
    <p>

    rem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always
     </p>
  </div>
  </div>


</div>

Here is an updated codepen that illustrates this: http://codepen.io/anon/pen/ZGMmgW