Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

See CSS Flexible Box Layout Module

Answer 2

Bootstrap alredy带来了响应式设计，但只有768px（Ipad宽度）。您可以在列系统中使用此引导功能：

.col-xs-至＆lt; 768px .col-sm-至≥768px.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＆amp; 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%;
}
}

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

3 个答案: