Question

基本上，我希望右侧边栏上的某个列（搜索）在移动设备上位于顶部，并且仍然在桌面视图上保留右侧边栏。

所以这就是我到目前为止所拥有的......

<div class="container">
    <div class="col-md-3 col-md-push-9">B</div>
    <div class="col-md-9 content col-md-pull-3">A</div>
    <div class="col-md-3 col-md-push-9">C</div>
</div>

在移动设备上看起来像这样（这就是我想要的）

| B |
| A |
| C |

然而，在桌面上，它看起来像这样（B和C之间存在差距，我不想要）

| A | B |
| A |   |
|   | C |

以下是它的外观：http://www.codeply.com/go/guzmu84ybo

有什么想法吗？

Answer 1

Working Codeply Solution

虽然flexbox可能是解决此流量问题的最现代方法，但有些人可能正在寻找一个简单的“Bootstrappy”。解决方案或适用于IE10 +的解决方案。单个媒体查询可以解决您的问题，您可以删除所有push / pull类。您可以将标记简化为：

<div class="container">
    <div class="row">
        <div id="searchWrap" class="col-md-3">B</div>
        <div class="col-md-9 content">
            <p>Lorem Ipsum... This content can be long now... </p>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

然后，您的CSS需要此单一媒体查询才能有效地重置＆＃39;导致所有问题的left属性：

@media (min-width : 992px) { 
    #searchWrap { 
        float: right;
        left: 0px; 
    }
}

您可以将992px更改为您希望搜索流向顶部的任何宽度。但992px是Bootstrap 3网格中的宽度，用于平板电脑宽度＆＃39;并且很可能是这种重新流动发生的适当宽度。（查看所有Bootstrap 3网格宽度here。）

Answer 2

尝试重新排列结构并使用flexbox概念对移动设备中的列重新排序：

<强> HTML

<div class="container">
  <div class="col-md-9 one">
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
  </div>
  <div class="col-md-3 two">B</div>
  <div class="col-md-3 three">C</div>
</div>

<强> CSS

@media (max-width: 991px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .one {
    order: 2;
  }

  .two {
    order: 1;
  }

  .three {
    order: 3;
  }
}

CodePly

在桌面和移动视图上重新订购引导列

2 个答案: