Push和Pull标签用于组织不同的复杂布局

Question

我正在开发一个网页，我想在Bootstrap响应式媒体查询启动时在页面上组织不同的层次结构级别。

目前我正在处理container > row > col-x-y设置中的项目。正如您将在提供的代码中看到的那样，我对实际网站进行了模拟。

目标是随着页面更改大小，将这些项目的顺序放在不同的位置。我设置此代码的方式将显示不同的屏幕尺寸布局。 Here's a fiddle代码如下。

我听说过在col标签中使用Push和Pull的方法，但我不知道我是否完全理解它是如何工作的。所以这是我的问题：

1）这可能吗？

2）如果是这样，它可以正确地进行这种布局吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}

<div class="container">
  <h2>Items with an * are the ones that move</h2>

  <h3>Smallest screens</h3>
  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>


  <h3>Small screens</h3>
  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
  

  <h3>Medium and Large Screens screens</h3>
  <div class="row">

    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

  </div>
</div>

非常感谢所有帮助！

Answer 1

Bootstrap的三种不同布局

1. 我复制了最后一个块。 （它用红色着色。）
2. 我在一个大块中包裹了第一个和第二个块。并将第三个块和最后一个块的副本包装在另一个大块中。 （大块是蓝色的。）



请检查结果：https://jsfiddle.net/glebkema/2y08thn5/

＆＃13;
＆＃13;
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}
.well-red {
  background: #fcc;
}
.well-blue {
  background: #ccf;
  padding: 4px 4px 0;
  margin: -4px -4px 8px;
}
＆＃13;
<div class="container">
  <h2>Items with an * are the ones that move
  <br>The red block is duplicated</h2>

  <h3>Screen is 
    <span class="visible-xs-inline">smallest</span>
    <span class="visible-sm-inline">small</span>
    <span class="visible-md-inline">medium</span>
    <span class="visible-lg-inline">large</span>
  </h3>

  <div class="row">

    <div class="col-xs-12 col-md-8">
      <div class="well well-blue">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>Picture Carousel</b>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="well">
              <b>*Get Help</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="well well-blue">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>*Current Status</b>
            </div>
          </div>
          <div class="col-md-12 hidden-xs hidden-sm">
            <div class="well well-red">
              <b>*Stay Connected</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 visible-xs visible-sm">
      <div class="well well-red">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

UPD。通过jQuery

复制最后一个块

您只能编辑一个块，然后通过jQuery克隆它。

https://jsfiddle.net/glebkema/m1egqbm0/

＆＃13;
＆＃13;
$(document).ready(function() {
  $( '#duplicate-this-block' ).clone().appendTo( "#put-a-duplicate-here" ).attr( 'class', 'col-md-12 hidden-xs hidden-sm' );
});
＆＃13;
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}
.well-red {
  background: #fcc;
}
.well-blue {
  background: #ccf;
  padding: 4px 4px 0;
  margin: -4px -4px 8px;
}
＆＃13;
<div class="container">
  <h2>Items with an * are the ones that move
  <br>The red block is duplicated by jQuery</h2>

  <h3>Screen is 
    <span class="visible-xs-inline">smallest</span>
    <span class="visible-sm-inline">small</span>
    <span class="visible-md-inline">medium</span>
    <span class="visible-lg-inline">large</span>
  </h3>

  <div class="row">

    <div class="col-xs-12 col-md-8">
      <div class="well well-blue">
        <div class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>Picture Carousel</b>
            </div>
          </div>
          <div class="col-xs-12">
            <div class="well">
              <b>*Get Help</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="well well-blue">
        <div id="put-a-duplicate-here" class="row">
          <div class="col-xs-12">
            <div class="well">
              <b>*Current Status</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>
    <div id="duplicate-this-block" class="col-xs-12 col-sm-6 visible-xs visible-sm">
      <div class="well well-red">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 2

编辑：我最初误解了这个问题，即约column ordering。原文如下。

经过大量的审核和测试，看起来不像你想要的那样。 Bootstrap将其网格组织成行，你的需求需要跳过行的元素（如果没有的JavaScript）。

使用offsetting columns可以做到这一点。我已经在网格中添加了一些CSS，以使效果更加明显。点击“整页”以获得更好的视图。

这不是一个完整的解决方案，但希望它可以作为帮助您实现目标的指南。

.show-grid [class^=col-] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
}
.show-grid {
  margin-bottom: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row show-grid">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row show-grid">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  </div>
  <div class="row show-grid">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
</div>

Answer 3

使用flex更改块的顺序

您可以在中型和大型屏幕上更改彩色块的order属性。

但请注意Browser compatibility！

请检查结果：https://jsfiddle.net/glebkema/cgog59ec/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.well {
  border: 2px solid black;
}
.flex-minus-1 .well { background: #fcc; }
.flex-minus-2 .well { background: #cfc; }
.flex-minus-3 .well { background: #ccf; }
.flex-minus-4 .well { background: #ffc; }

@media (min-width: 992px) {
  .flex-md { 
    display: flex;
    flex-wrap: wrap;
  }
  .flex-minus-1 { order: -1; } 
  .flex-minus-2 { order: -2; } 
  .flex-minus-3 { order: -3; } 
  .flex-minus-4 { order: -4; } 
}

<div class="container">
  <h2>Colored blocks are changing their "order" property</h2>

  <h3>Screen is 
    <span class="visible-xs-inline">smallest</span>
    <span class="visible-sm-inline">small</span>
    <span class="visible-md-inline">medium</span>
    <span class="visible-lg-inline">large</span>
  </h3>

  <div class="row flex-md">

    <div class="col-xs-12 col-md-8 flex-minus-4">
      <div class="well">
        <b>Picture Carousel</b>
      </div>
    </div>
    <div class="col-xs-12 col-md-8 flex-minus-2">
      <div class="well">
        <b>*Get Help</b>
      </div>
    </div>

    <div class="col-xs-12 col-md-4 flex-minus-3">
      <div class="well">
        <b>*Current Status</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 1</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 2</b>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="well">
        <b>Column item 3</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-12">
      <div class="well">
        <b>Calendar Items Static Carousel</b>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4 flex-minus-1">
      <div class="well">
        <b>*Stay Connected</b>
      </div>
    </div>

  </div>
</div>