Reorder columns for mobile devices with Bootstrap

Question

I have a web application which was created for desktops and now we are trying to utilize Twitter Bootstrap to make it responsive. We have few sidebar layouts where we want them to collapse in order different from their actual order. Right now when viewing on mobile phone left column is shown on top of content column. We want to show content on top for mobile device. I know about push-pull classes in twitter bootstrap but that doesn't seems to work unless I make changes to HTML. We can't change the HTML since there are other legacy themes which will break. Any help will be appreciated.

Updated: Here is the jsfiddle to reproduce the issue. As you can see it results in Blue sidebar on Green content column and I want the exact inverse of it where Green should be on top of Blue column.

    <div id="outerPageContainer" class="container">
        <div id="innerPageContainer">
            <div id="header" class="row">
                <div class="zone col-md-12 alert alert-warning">
                    Header
                </div>
            </div>
            <div id="contentContainer" class="row">
                <div id="leftColumn" class="col-md-3">
                    <div class="zone alert alert-info">
                        Sidebar
                    </div>
                </div>
                <div id="mainColumn" class="leftSidebarLayout col-md-9">
                    <div class="zone alert alert-success">
                        Content
                    </div>
                </div>
            </div>
            <div id="footer" class="row">
                <div class="zone col-md-12 alert alert-warning">
                    Footer
                </div>
            </div>
        </div>
    </div>

http://jsfiddle.net/4z7bq8ft/5/embedded/result/

Kind Regards

Answer 1

Try the method bellow and order as needed.

 .plate { display: flex; flex-direction: row; } .one, .two, .three, .four, .five { width: 100px; height: 100px; display: inline-block; text-align: center; line-height: 100px; font-weight: bold; color: white; font-size: 24px; } .one { background-color: red; order: 2; } .two { background-color: green; order: 3; } .three { background-color: orange; order: 1; } .four { background-color: darkorange; order: 5; } .five { background-color: orange; order: 4; } 

 <div class="plate"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> </div> 

See CSS Flexible Box Layout Module

Answer 2

Bootstrap alredy brings responsive design, but only to 768px (Ipad width). You can use this bootstrap functionality with their column system:

.col-xs- to <768px .col-sm- to ≥768px .col-md- to ≥992px and .col-lg- to ≥1200px

there is more info in the web: http://getbootstrap.com/css/

If you want responsive design below 768 you will need to do it yourself by using:

@media (mix-width: 600px, max-width: 768px) for example.

Answer 3

Try this : http://jsfiddle.net/4z7bq8ft/9/

and html & css code is here

<form id="form1" runat="server">
        <div id="outerPageContainer" class="container">
            <div id="innerPageContainer">
                <div id="header" class="row">
                    <div class="zone col-sm-12 alert alert-warning">
                        Header
                    </div>
                </div>
                <div id="contentContainer" class="row">
                   <div id="mainColumn" class="leftSidebarLayout col-sm-9">
                        <div class="zone alert alert-success">
                            Content
                        </div>
                    </div>
                    <div id="leftColumn" class="col-sm-3">
                        <div class="zone alert alert-info">
                            Sidebar
                        </div>
                    </div>

                </div>
                <div id="footer" class="row">
                    <div class="zone col-sm-12 alert alert-warning">
                        Footer
                    </div>
                </div>
            </div>
        </div>
    </form>

.col-sm-9 {
    float: right !important;
    width: 75%;
}

@media screen and (max-width:768px) {
.col-sm-9 {

    width: 100%;
}
.col-sm-3 {
    float: left;
    width: 100%;
}
}