问题描述:

I am working on a webpage where I want to organize the different hierarchy levels on the page as the Bootstrap responsive media queries kick in.

Currently I am working with the items in a container > row > col-x-y setup. As you will see in the code provided, I have a mock up of the actual website.

The goal is to get the order of these items in different places as the page changes size. The way I set up this code will show the different screen size layouts. Here's a fiddle with the code below.

I have heard of a way to use Push and Pull in the col tags but I don't know if I quite understand how it works. So here are my questions:

1) Is this possible?

2) If so, can it properly do this layout?

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

网友答案:

Three different layouts by Bootstrap

  1. I've duplicated the last block. (It is colored in red.)
  2. I wrapped first and second block in one large block. And wrapped the third block and the duplicate of the last block in another large block. (Large blocks are blue.)

Please check the result: 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>
网友答案:

Edit: I originally misunderstood the question, which is about column ordering. The original is below.

After much review and testing, it doesn't look like what you want is possible. Bootstrap organizes its grid into rows, and your requirements would need elements to jump across rows (something not possible without JavaScript).


This is possible using offsetting columns. I've added some CSS to the grid to make the effect more obvious. Click "Full page" to get a better view.

This is not a complete solution, but hopefully it can serve as a guide to help you towards your goal.

.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>
网友答案:

Use flex to change the order of blocks

You can change the order property for colored blocks on medium and large screens.

But be careful about Browser compatibility!

Please check the result: 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>
相关阅读:
Top