响应式引导行

Question

我目前在一个正在使用的引导行中有以下3列，因为它们是md-4，它们占用相等的部分

基本上看起来像：

ColA ColB ColC

<div class="row">
    <div class="col-md-4"> <p class="control-label h3"> ColA </p>
        <div class="jumbotron ColA">
            <textarea class="tArea" id="AText" rows="5"></textarea>

        </div>

        <p class="control-label h3">ColB </p>
        <div class="jumbotron ColB">
            <textarea class="tArea" id="BText" rows="5" cols="25" ></textarea>
        </div>
    </div>

    <div class="col-md-8"><p class="control-label h3">ColC </p>
        <div class="jumbotron ColC">
            <textarea class="tArea" id="CText" rows="5" cols="25" ></textarea>
        </div></div>
</div>

我想要实现的是悬浮在列上，将其扩展到高度和宽度的两倍，同时将其他列推向或拉向左侧。

作为一个例子，如果我在Cola Id上面盘旋，请看布局如下：

| ColB | ColA |
| ColC | MoreA |

将鼠标悬停在B上：

| ColA | ColB |
| ColC | MoreB |

和C：

| ColA | ColC |
| ColB | MoreC |

我已经尝试分别拉动，推动和浮动div，并且能够在A和B上获得所需的行为，但它看起来非常不稳定，而且我不能在Jquery中轻松实现。是否有一些css属性我忽略了帮助实现这种行为？