Bootstrap的push和pull類不起作用？

Question

在小型設備上訂購：

1
2
3
4

在台式設備上是：

1
3
2
4

我的代碼：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div id="sidebar-right" class="col-lg-6 col-sm-6"> <h3 class="title">1</h3> </div> <div id="content" class="col-lg-6 col-sm-6 col-lg-push-6"> <h2>2</h2> </div> <div id="sidebar-left" class="col-lg-6 col-sm-6 col-lg-pull-6"> <h2>3</h2> </div> <div id="sidebar-right" class="col-lg-6 col-sm-6"> <h2>4</h2> </div> </div> </div> 

Answer 1

Bootstrap的push和pull類用於水平交換，而不是垂直交換。

您將需要為此定制樣式。

方法＃01-Flexbox：

CSS3 flexbox可以用來制作它。 我們需要將中間的兩個元素（需要交換）包裝在div 。

HTML：

<div class="container">
  <div class="elem">1</div>
  <div class="holder">
    <div class="elem">2</div>
    <div class="elem">3</div>
  </div>
  <div class="elem">4</div>
</div>

必要的CSS：

.holder {
  flex-direction: column;
  display: flex;
}

@media (min-width: 992px) {
  .holder {
    flex-direction: column-reverse;
  }
}

 .container .elem { border: 1px solid black; margin-bottom: 5px; padding: 3px 5px; } .holder { flex-direction: column; display: flex; } @media (min-width: 992px) { .holder { flex-direction: column-reverse; } } 

 <div class="container"> <div class="elem">1</div> <div class="holder"> <div class="elem">2</div> <div class="elem">3</div> </div> <div class="elem">4</div> </div> 

---

方法＃02-表格屬性：

如果還需要舊版瀏覽器的支持，則可以使用css表屬性：

HTML：

<div class="container">
  <div class="elem">1</div>

  <div class="holder">
    <div class="elem">2</div>
    <div class="elem-holder">
      <div class="elem">3</div>
    </div>
  </div>

  <div class="elem">4</div>
</div>

必要的CSS：

.holder {
  display: table;
  width: 100%;
}

@media (min-width: 992px) {
  .holder .elem-holder {
    display: table-header-group;
    overflow: hidden;
    width: 100%;
    height: 1%;
  }
}

 .container .elem { border: 1px solid black; margin-bottom: 5px; padding: 3px 5px; } .holder { display: table; width: 100%; } @media (min-width: 992px) { .holder .elem-holder { display: table-header-group; overflow: hidden; width: 100%; height: 1%; } } 

 <div class="container"> <div class="elem">1</div> <div class="holder"> <div class="elem">2</div> <div class="elem-holder"> <div class="elem">3</div> </div> </div> <div class="elem">4</div> </div>