使用引导程序对移动设备的列重新排序

Reorder columns for mobile devices with Bootstrap

本文关键字：新排序 排序 引导程序 移动      更新时间：2023-09-26

>我有一个为桌面创建的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/

亲切问候

Bootstrap alredy带来了响应式设计，但仅限于768px（Ipad宽度）。您可以将此引导功能与他们的列系统一起使用：

.col-xs- 至 <768 像素 .col-sm- 至 ≥

768 像素 .col-md- 至 ≥992 像素和 .col-lg- 至 ≥1200 像素

网络上有更多信息：http://getbootstrap.com/css/

如果你想要低于768的响应式设计，你需要自己使用：

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

尝试下面的方法并根据需要进行排序。

.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 弹性框布局模块

试试这个： 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%;
}
}
相关文章：