html - 推拉标签来组织不同的复杂布局

Question

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

目前我正在处理 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. 我已经复制了最后一个 block 。 (它是红色的。)
2. 我将第一 block 和第二 block 包裹在一个大块中。并将第三个 block 和最后一个 block 的副本包装在另一个大块中。 (大块是蓝色的。)

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

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

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

---

更新。通过 jQuery 复制最后一个 block

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

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

$(document).ready(function() {
  $( '#duplicate-this-block' ).clone().appendTo( "#put-a-duplicate-here" ).attr( 'class', 'col-md-12 hidden-xs hidden-sm' );
});

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

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