重新排序bootstrap中的行

Question

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

---

-一个-

-B-

当视口较大(即md)时,我想反转两个.如:

---

-B-

-一个-

我以为我可以通过思考'移动优先'来做到这一点

<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以充分利用框架.

1. 在当前和旧版浏览器上支持的另一种方法是在父级上使用display:table,并在要更改其顺序的子级上显示:table-caption.请参阅dfsq的答案

   /sf/answers/1920294771/

   如果您打算使用带有display:table as max-width的响应图像,请确保图像的宽度为100%(请参阅css示例):100%不适用于表格内的图像.

2. 当前使用CSS的现代方法是使用flexbox使用媒体查询按照您在给定断点处所需的顺序放置元素.现代浏览器支持Flexbox.

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

3. 另一种方法是在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%宽度.

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