html - 在 Bootstrap 中重新排序行

Question

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

---

-A-

-B-

当视口(viewport)较大时(即 md)，我想反转两者。比如:

---

-B-

-A-

我认为我可以通过考虑“移动优先”来做到这一点

<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 mixin 时，您会看到它们没有从推拉或偏移中删除 col-12-X，但它们未被使用。

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

1. 当前和旧版浏览器都支持的另一种方式是在父级上使用 display:table，在要更改顺序的子级上使用 display:table-caption。 在这里查看 dfsq 的回答

   https://stackoverflow.com/a/27432782/1004312

   如果您打算将响应式图像与 display:table 一起使用，请确保您的图像具有 width:100%(参见 css 示例)，因为 max-width:100% 不适用于表格内的图像。

2. 目前，仅使用 CSS 的现代方式是使用 flexbox 在使用媒体查询的给定断点处按您想要的顺序放置元素。现代浏览器支持 Flexbox。

   http://caniuse.com/#feat=flexbox -- 查看当前支持

3. 另一种方法是在调整大小/加载时使用 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% 宽度。

全宽元素不需要网格系统，为自己节省一些额外的包装。*