html - Bootstrap-在较小的 View 中将右列从左移到左

我正在尝试找出一种在Bootstrap中执行此操作的方法（不完全确定是否可行）。

我有3列-占据容器50％的中央列，以及位于容器两侧的2个辅助列。

调整大小时，我希望最右边的列堆叠在左边的列下方。下图。



我尝试在最右边的列（在下面）上执行col-sm-offset，但这不能正常工作。

<div class="container">
    <div class="col-sm-3 col-md-3 left">
        Left
    </div>
    <div class="col-sm-6  col-md-9  feed">
        Middle
    </div>
    <div class="col-sm-3 col-md-3 col-sm-offset-1 right">
        Right
    </div>
</div>

小提琴here

希望有人能帮忙

最佳答案

它不是最漂亮的代码，但其行为符合您的要求：

的HTML：

<div class="cont">
    <div class="col-sm-3 left">
        Left
    </div>
    <div class="col-sm-3  col-sm-offset-6 right">
        Right
    </div>
</div>
<div class="main">
    <div class="feed mini">
        Middle
    </div>
</div>

CSS：

.left {
    background-color: Blue;
}
.feed {
    background-color: Red;
}
.right {
    background-color: Green
}
.main {
    position: relative;
    left: 25%;
    width: 50%;
}

@media(max-width:767px) {
    .cont {
        width: 25%;
    }
    .main {
        position: absolute;
        top: 0px;
        left: 25%;
        width: 100%;
    }
}