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