为了好玩，我破解了Voodoo的示例，使用Javascript来操作类，然后使用CSS转换来管理动画：http://jsfiddle.net/WDV69/29/
不一定是更好的解决方案，只是不同。
如果我的javascript有点粗糙，那不是我的部门。

$("#closeTrigger").click(function() {

$('.container').removeClass('openLeft').addClass('closeLeft');  
});

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});

这里有一个快速的解决方案，似乎可以完成你想要的。请参阅the fiddle here。
它从宽度的引导程序span类开始，然后单击，动画化右侧框的宽度扩展，同时缩小左侧框的大小，然后完全隐藏它。我在动画完成后添加了span12。

$("#moveTrigger").click(function() {
  // Left box animates to 0 width
  $(".leftbox").animate({ "width": "0%" }, "slow", function() {
    // Hide when width animation finishes
    $(this).hide();
  });
  // Right box expands. Tinkered with add span12 after animation is complete
  $(".rightbox").animate({ "width": "90%" }, "slow", function() {
    $(this).removeClass('span6').addClass('span12').css('width','');
  });
});​

这可能需要进行一些优化，但可以实现效果。

应要求，另一个响应迅速的解决方案：
http://jsfiddle.net/panchroma/pwP5V/
同样，这是基于由@Voodo启动的javascript
它使用媒体请求来管理动画，因此如果查看CSS，您将看到一系列设置，如

@media (max-width: 480px) {
.to-hide {
background-color: yellow;  
}
....
}

它仍然需要一些微调，但我认为你需要真实的生活中的内容发挥在这一点上，因为一些设置可能取决于相对高度的左列和右列。
您可以做的自定义是无穷无尽的。例如，检查关闭如何在最窄的窗口工作。转换时间也可以自定义为打开和关闭，以及不同的窗口大小。
这里应该够你撑一阵子了！