在桌面和移动视图上重新排序 bootstrap 列

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

尝试重新排列结构并使用 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

Answer 2

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 中需要这个单一的媒体查询来有效地 'reset' 导致您所有问题的 left 属性:

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

您可以将 992px 更改为您希望搜索流到顶部的任何宽度。但是 992px 是 Bootstrap 3 的 'tablet width' 网格中的宽度，很可能是发生这种重新流动的合适宽度。（查看所有 Bootstrap 3 个网格宽度 here。）

在桌面和移动视图上重新排序 bootstrap 列

Re-ordering bootstrap columns on desktop and mobile views

html

css

mobile

twitter-bootstrap

twitter-bootstrap-3