html - 使用bootstrap可变高度堆叠的两列元素

Question

我正在使用 Bootstrap 通过左右浮动并在每个元素上交替使用“清除”来填充两列中的元素(带有文本内容的 div block )。根据每个元素的高度，仅在右列的两个堆叠元素之间存在间隙。

我不确定如何绕过它。这是我使用的代码: 

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

这里还有一个代码笔来说明我的问题。有没有办法做到这一点？

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

我也注意到 RT site他们使用类似的技术，在评论家和观众评论部分也有同样的问题。

编辑:元素的顺序很重要，目标是当浏览器的大小调整为较小的窗口时，右列中的元素合并到紧邻的左列元素下方。所以实际顺序保持一致。想一想任何 2 列评论系统，其中顶部元素的优先级高于较低元素。

Answer 1

我回来参加第 2 轮，这次考虑了部分的预期顺序，这是我想出的解决方案。当它从中屏幕切换到小屏幕等时，您可能需要调整屏幕比较宽度的实际值，但这应该给您一般要点。

再次，使用 jquery(因为你没有反对它)

$(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 -->