Html 防止浮动列在另一列下换行

我的笔：
JSFIDLE:

调整窗口大小时，带有超链接的右列将环绕在左列下方

我怎样才能防止这种情况发生

HTML

<div>
<div class="panel">
  <div class="panel-header">Customers</div>
  <div class="panel-body">
      <div class="panel-body-container">
          <div style="background:yellow;" class="col-2 imageContainer">
              <img  src="http://s16.postimg.org/tqs90puwl/customer.png"></img>
          </div>

      <div   class="col-2">
        <ul>
          <li class="list-group-item"><a href="#">1Intel superior solutions finder</a></li>     
          <li class="list-group-item"><a href="#">2Intel superior solutions finder</a></li>
          <li class="list-group-item"><a href="#">3Intel superior solutions finder</a></li>
        </ul>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<div class="panel">
  <div class="panel-header">Personal Links</div>
  <div class="panel-body">body</div>
</div>
<div class="panel">
  <div class="panel-header">Events</div>
  <div class="panel-body">body</div>
</div>
   <div class="clearfix"></div>
</div>

---

看起来是因为您在

.imageContainer

上使用了特定的像素宽度。尝试将其改为百分比：

.imageContainer {
    width: 150px; /* Change to 50% */
    height: 150px;    
    overflow: hidden;
    background: #ccc;   
    text-align: center;
    line-height: 150px;
}

---

由于您的列宽为33%，因此在调整窗口大小时，预期的结果应该是什么？我建议在面板中添加

min width

，并且您必须为mobile使用断点。

.imageContainer {
    width: 150px; /* Change to 50% */
    height: 150px;    
    overflow: hidden;
    background: #ccc;   
    text-align: center;
    line-height: 150px;
}