html - Bootstrap - 在较小的 View 中将右列向左移动

Question

我正试图找出一种在 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>

fiddle here

希望有人能帮忙

Answer 1

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

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%;
    }
}