css - 列更改大小时重排内容

Question

需要一点帮助。我已经为这个问题苦苦挣扎了几天。

我正在使用下面找到的方法切换列。

Bootstrap toggle left column in a two column row

在我较大的列 (Col1) 中，当我暴露右列 (col2) 时它会缩小，我希望我的两列(col1, col1 和 col1, col2)调整为单列。我正在用头撞墙试图解决这个问题。我敢肯定，当有人展示解决方案时，我会觉得自己很傻，这是一件非常明显的事情。

<div class="container-fluid">
  <div class="row">
    <div id="list-col" class="col-xs-12">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-6 item">
          Col1, col1
          </div>
          <div class="col-xs-6 item">
          Col1, col2
          </div>
        </div>
      </div>
    </div>
    <div id="map-col" class="col-xs-0">COL 2</div>
  </div>
</div>

https://jsfiddle.net/td234/qu7j21pm/1/

感谢所有帮助!

汤姆

Answer 1

只需要将 col-xs-6 列上的类切换为 col-xs-12。

$('.item').toggleClass('col-xs-12 col-xs-6');