使用Bootstrap重新排序移動設備的列

Question

我有一個為台式機創建的Web應用程序，現在我們正在嘗試利用Twitter Bootstrap使其具有響應能力。 我們很少有側邊欄布局，我們希望它們按照與實際順序不同的順序折疊。 現在，在手機上查看時，內容列頂部會顯示左列。 我們想在移動設備的頂部顯示內容。 我知道Twitter引導程序中的推拉類，但是除非我對HTML進行更改，否則這似乎不起作用。 我們無法更改HTML，因為還有其他舊主題可能會中斷。 任何幫助將不勝感激。

更新：這是jsfiddle重現該問題。 如您所見，它會在綠色內容列上顯示藍色側邊欄，我想要它的確切反面，其中綠色應位於藍色列的頂部。

    <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/

親切的問候

Answer 1

請嘗試以下方法並根據需要進行排序。

 .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> 

請參閱CSS靈活包裝盒布局模塊

Answer 2

Bootstrap alredy帶來了響應式設計，但僅為768px（Ipad寬度）。 您可以在其列系統中使用此引導程序功能：

.col-xs-至<768px .col-sm- .col-md-至≥768px.col .col-md-至≥992px和.col-lg-至≥1200px

網站上有更多信息： http ： //getbootstrap.com/css/

如果您希望響應性設計低於768，則需要使用以下方法自己做：

@media (mix-width: 600px, max-width: 768px) 。

Answer 3

試試這個： http : //jsfiddle.net/4z7bq8ft/9/

和html＆css代碼在這里

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