Bootstrap 3 - 图像＆amp;高度相同的列表中的文本，但对于移动，文本应包装图像

Question

我需要帮助才能显示包含数据的列表，就像下面的屏幕截图一样。在桌面和平板电脑上，无论文本的高度如何，我都需要左侧的图像和右侧的文本以及ul > li中相同的高度。但是在移动欺骗时，文本应该环绕图像，这样图像仍然可以在左侧，文本应该环绕它。
谢谢！

Answer 1

{
  box-sizing: border-box;
}

.col-container {
  display: table;
  width: 100%;
}

.col {
  display: table;
  padding-right: 10px;
}

.Ltcol {
  float: left;
  clear: both;
}

@media only screen and (max-width: 768px) {
  .col {
    display: block;
  }
}

.col-container ul li {
  list-style: none;
}

<h2>Responsive Equal Height Columns</h2>
<p>Resize the browser window to see the result. </p>

<div class="col-container">
  <ul>
    <li>
      <div class="col Ltcol" style="background:#eee">
        <h2>Column 1</h2>
        <p>Image</p>
      </div>

      <div class="col" style="background:#ddd">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
      </div>
    </li>
    <li>
      <div class="col Ltcol" style="background:#eee">
        <h2>Column 1</h2>
        <p>Image</p>
      </div>

      <div class="col" style="background:#ddd">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
      </div>
    </li>
    <li>
      <div class="col Ltcol" style="background:#eee">
        <h2>Column 1</h2>
        <p>Image</p>
      </div>

      <div class="col" style="background:#ddd">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
      </div>
    </li>
  </ul>

</div>

大家好，设法使用下面的代码:(请更改浏览器大小以显示其效果）