使用 Bootstrap 为移动设备重新排序列答案

【问题标题】：Reorder columns for mobile devices with Bootstrap使用 Bootstrap 为移动设备重新排序列
【发布时间】：2015-01-20 20:14:24
【问题描述】：

我有一个为桌面创建的 Web 应用程序，现在我们正在尝试利用 Twitter Bootstrap 使其具有响应性。我们很少有侧边栏布局，我们希望它们按照与实际顺序不同的顺序折叠。现在在手机上查看时，左栏显示在内容栏的顶部。我们希望在移动设备的顶部显示内容。我知道 twitter bootstrap 中的推拉类，但除非我对 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/

亲切的问候

【问题讨论】：

请在 jsfiddle 中分享您的代码
刚刚用 jsfiddle 更新了帖子。我希望这些列重新排序，使移动设备的绿色在蓝色之上，而不采用移动优先的方法，这意味着为移动设备调整 HTML 并为桌面使用推/拉。

标签： javascript html css twitter-bootstrap-3 responsive-design

【解决方案1】：

Bootstrap 已经带来了响应式设计，但只有 768 像素（Ipad 宽度）。您可以将此引导功能与他们的列系统一起使用：

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

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

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

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

【讨论】：

【解决方案2】：

尝试下面的方法并根据需要订购。

.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

【讨论】：

【解决方案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%;
}
}

【讨论】：