Question

我正试图在Bootstrap中找到一种方法（不完全确定它是否可能）。

我有3列 - 一个中心柱，占据容器的50％，两侧各有两个辅助柱。

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

Desired output

我尝试在最右侧的列（下方）中执行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

希望有人可以提供帮助

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

Answer 2

<div class="container">

    <div class="row">
        <div class="col-sm-3 col-md-3 col-header">
            <div class="header">
                H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R H E A D E R
            </div>    
        </div>
        <div class="col-sm-9 col-md-6 col-content">
            <div class="content">
                C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T C O N T E N T 
            </div>    
        </div>              
        <div class="col-sm-3 col-md-3 col-sidebar">
            <div class="sidebar">
                S I D E B A R S I D E B A R S I D E B A R S I D E B A R S I D E B A R S I D E B A R S I D E B A R S I D E B A R S I D E B A R S I D E B A R
            </div>  
        </div>          
    </div>
    <div class="row">
        <div class="col-sm-9 col-sm-offset-3 col-footer">
            <div class="footer">
                F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R F O O T E R 
            </div>
        </div>
    </div>          
</div>

JS：

function changeLayout() {
    if($(".container").width() === 720){

        if(!$(".col-header *").is(".sidebar")){
            $(".sidebar").appendTo(".col-header");
            console.log("Move to col-header");
        }
    } else {

        if(!$(".col-sidebar *").is(".sidebar")){
            $(".sidebar").appendTo(".col-sidebar");
            console.log("Delete from col-header");
        }
    }     
};    
$(window).ready(function(){
    changeLayout();
});

$(window).resize(function(){
    changeLayout();
});

例如： enter link description here

Bootstrap - 在较小的视图中将右列向左移动

2 个答案: