前三种方法的演示：https://jsbin.com/guyenu

Question

在手机上查看我的页面时，我有以下布局

-A -

-B -

当视口较大（即md）时，我想反转两个。如：

-B -

-A -

我认为我可以通过思考＆＃39;移动优先＆＃39;通过

<div class="row"> 
<div class="col-xs-12 col-md-4">first guy</div>
<div class="col-xs-12 col-md-8"> second guy
    <div class="col-xs-12 col-md-push-12">A</div>
    <div class="col-xs-12 col-md-pull-12">B</div>
</div>

相反，似乎这会将列偏移到容器的左侧和右侧，例如

 -*-     A

B - * -

这里很难说明，但不是切换行位置（因为它们各自的大小为12），它们偏移到它们包含元素的外部（应该是col-md-8）

Answer 1

如果你打开了Bootstrap的未经授权的CSS，这是学习如何使用框架的第二个最好的方法，第一个是LESS和/或SCSS，你会看到12个列中的推拉工作不是全宽物品。这些类只分别改变左或右的相对位置。

  .col-sm-push-8 {
    left: 66.66666667%;
  }

  .col-sm-pull-4 {
    right: 33.33333333%;
  }

当你为网格打开LESS mixins时，你会发现他们没有从推拉或偏移中移除col-12-X，但它们没有被使用。

Bootstrap不是CSS，它是一个使用CSS的框架。它并不能为每种情况提供解决方案，也不能为每种情况提供解决方案。 GetBootstrap.com本身，所有的展示网站，以及地球上几乎每个主题或Bootstrap支持的网站都使用自定义CSS。实际上，您必须学习CSS才能充分利用框架。

另一种支持当前和旧版浏览器的方法是在父级上使用display：table，并在要更改其顺序的子级上显示：table-caption。 请dfsq
在此处查看答案
https://stackoverflow.com/a/27432782/1004312

如果您打算使用带有display：table的响应式图像作为最大宽度，请确保图像的宽度为100％（请参阅css示例）：100％不能处理图像内部表。
当前使用CSS的现代方法是使用flexbox使用媒体查询按照您在给定断点处所需的顺序放置元素。现代浏览器支持Flexbox。

http://caniuse.com/#feat=flexbox - 请参阅当前的支持
另一种方法是在resize / load上使用jQuery insertBefore或insertAfter（无论什么是必需的）。

上述所有方法都是客户端。

另一种方式，当内容复杂时，我的首选方式是使用服务器端代码（例如php-mobile-detect），并在需要时提供完全不同的html，特别是如果对于小型设备而言，内容不合适（如吓坏大图）。

前三种方法的演示：https://jsbin.com/guyenu

表格标题示例

<强> HTML：

   <h2>Table Caption</h2>
   <div class="table-wrap">
      <section class="content-Y">
         <h2>A</h2>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </section>
      <section class="content-X">
         <h2>B</h2>
         <form action="#" method="post" role="form">
            <div class="form-group">
               <label for="name">Text Input:</label>
               <input type="text" name="name" class="form-control" id="name" value="" tabindex="1" />
            </div>
            <div class="form-group">
               <input type="submit" class="btn btn-default" value="Submit" />
            </div>
         </form>
      </section>
   </div>

<强> CSS

/* table caption */
/* https://stackoverflow.com/questions/27432398/vertical-order-grid-in-bootstrap */

.content-X,
.content-Y {
    border: 1px solid red;
    margin: 0 0 10px 0;
}

@media (min-width: 768px) {
    .table-wrap {
        display: table;
    }

    .table-wrap img {width:100%;height:auto;}

    .content-X {
        display: table-caption;
    }
}

Flexbox示例

<强> HTML

   <h2>Flexbox</h2>
   <div class="flex-wrap">
      <section class="content-2">
         <h2>A</h2>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </section>
      <section class="content-1">
         <h2>B</h2>
         <form action="#" method="post" role="form">
            <div class="form-group">
               <label for="name">Text Input:</label>
               <input type="text" name="name" class="form-control" id="name" value="" tabindex="1" />
            </div>
            <div class="form-group">
               <input type="submit" class="btn btn-default" value="Submit" />
            </div>
         </form>
      </section>
   </div>

<强> CSS

.content-1,
.content-2 {
    border: 1px solid red;
    margin: 0 0 10px 0;
}
@media (min-width:768px) { 
    .flex-wrap {
        display: -moz-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
        -ms-flex-direction: column;
        flex-flow: column;
    }
    .content-1 {
        -moz-box-ordinal-group: 1;
        -webkit-box-ordinal-group: 1;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
    }
    .content-2 {
        -moz-box-ordinal-group: 2;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
}

jQuery示例

<强> HTML

   <h2>jQuery InsertBefore</h2>
   <div class="content-A">
      <h2>A</h2>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
   </div>
   <div class="content-B">
      <h2>B</h2>
      <form action="#" method="post" role="form">
         <div class="form-group">
            <label for="name">Text Input:</label>
            <input type="text" name="name2" class="form-control" id="name" value="" tabindex="1" />
         </div>
         <div class="form-group">
            <input type="submit" class="btn btn-default" value="Submit" />
         </div>
      </form>
   </div>

<强> CSS

.content-A,
.content-B {
    border: 1px solid red;
    margin-bottom: 10px;
}

<强> jQuery的：

$(window).on("resize", function() {

    if($(window).width() >= 768) {

        $(".content-B").insertBefore($(".content-A"));


    } else {

        $(".content-A").insertBefore($(".content-B"));

    }

}).resize();

*注意：使用网格系统时不需要.col-xs-12。最后一个最小宽度下的任何东西都是100％宽度。

全宽度项目不需要网格系统，节省一些额外的包装。*

重新排序bootstrap中的行

-A -

-B -

-B -

-A -

1 个答案:

前三种方法的演示：https://jsbin.com/guyenu

表格标题示例

Flexbox示例

jQuery示例