列更改大小时重排内容

Question

需要一些帮助。我几天都在努力解决这个问题。

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

Bootstrap toggle left column in a two column row

在我暴露右列（col2）时收缩的较大列（Col1）中，我希望我的两列（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');