Bootstrap - Move right column to left in left in smaller view

Question

I am trying to figure out a way to do this in Bootstrap (not entirely sure if it's possible or not).

I have 3 columns - a central column which is taking 50% of the container, and 2 ancillary columns either side of it.

When I resize I want the rightmost column to stack under the left column. Diagram below.

Desired output

I have tried performing an col-sm-offset on the right-most column (below), but this doesn't quite work correctly.

<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

Hope someone can help

Please refer: http://stackoverflow.com/questions/19929213/bootstrap-change-div-order-with-pull-right-pull-left-3-columns — Priya, Mar 15 '16 at 05:08

score 0 · Answer 1 · answered Feb 01 '15 at 01:56

It's not the prettiest code but this behaves as you requested:

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

score 0 · Answer 2 · answered Apr 05 '17 at 08:20

<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();
});

example: enter link description here

Whilst this code snippet is welcome, and may provide some help, it would be [greatly improved if it included an explanation](//meta.stackexchange.com/q/114762) of *how* and *why* this solves the problem. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. — Toby Speight, Apr 05 '17 at 08:48

Bootstrap - Move right column to left in left in smaller view

2 Answers2