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

Posted 2023-03-06

【中文标题】在桌面和移动视图上重新排序引导列

【英文标题】：Re-ordering bootstrap columns on desktop and mobile views

【发布时间】：2015-08-05 19:35:02

【问题描述】：

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

这就是我目前所拥有的......

<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

有什么想法吗？

【问题讨论】：

它看起来不像 Bootply 中的第二个结构：bootply.com/5v9bsQfwQg

如果 A 的内容足够长就可以了。

抱歉，没有意识到我需要注册才能保存代码 sn-p。给你，codeply.com/go/guzmu84ybo

【参考方案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

【讨论】：

太棒了！正是我想要的。我选择了这个而不是另一个，因为它看起来更灵活。

【参考方案2】：

Working Codeply Solution

虽然 flexbox 可能是解决此流程问题的最现代方法，但有些人可能正在寻找简单的“引导程序”解决方案或适用于 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 中需要这个单一的媒体查询来有效地“重置”导致你所有问题的 left 属性：

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

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