如何垂直重新排列引导列 [英] How to reorder bootstrap columns vertically

问题描述

我正在尝试在Bootstrap v3中构建以下布局:

I'm trying to build the following layout in Bootstrap v3:

|  Small       |   Large            |
|--------------|--------------------|
| [A         ] | [A      ][B      ] |
| [A.1       ] | [A.1             ] |
| [B         ] |                    |

尽管以前已经问过很多次了...

Although this has been asked many previous times before...

• 如何更改移动版式上的Bootstrap 3列顺序?
• 使用Twitter Bootstrap响应性地重新排序div?
• 引导程序3:崩溃时更改.col-X元素的垂直顺序
• Bootstrap 3网格折叠顺序

• How do I change Bootstrap 3 column order on mobile layout?
• Reordering divs responsively with Twitter Bootstrap?
• Bootstrap 3: Change vertical ordering of .col-X elements when collapsing
• Bootstrap 3 grid collapse order

所有这些答案都依赖于使用引导程序的推送| pull 类，可在一行中左右移动事物.如果我们在这些线程中采纳建议，并从上面的移动布局开始，那么全宽A.1部分将占据宽布局中的整个第二行，这时左右移东西没有任何好处，除了将这些项目隐藏在屏幕之外.

All of those answers have relied on using bootstrap's push | pull classes, which move things left and right within a row. If we take the advice within those threads and start with the mobile layout above, the full width A.1 section will take up the whole 2nd row on a wide layout, at which point shifting things right and left doesn't do any good, excepting hiding those items off screen.

问:是否可以根据屏幕尺寸垂直移动项目?

Q: Is there anyway to shift an item vertically depending on the screen size?

.a, .b {  border: 1px solid lightgrey;}
.a { color: green;}
.b { color: blue;}

<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 class="col col-sm-6 a">Section A</div>
    <div class="col col-xs-12 a">More Info about Section A</div>
    <div class="col col-sm-6 b">Section B</div>
  </div>
</div>

推荐答案

您可以使用flexbox来实现.

You can achieve this with flexbox.

所有三个盒子都必须放在伸缩容器display: flex;中.然后，您可以在flex容器内为所有div赋予一个顺序，该顺序可以使用媒体查询以所需的屏幕宽度order: 1;插入.

All three boxes need to be inside a flex container display: flex;. You then give all of the div's inside the flex container an order that kicks in using a media query in the desired screen width order: 1;.

CSS的其他主要部分用于确保将三个方框的大小正确地设置为一列.

The other main parts of the CSS are there to make sure that the three boxes are sized correctly into a column.

flex-direction: row;
flex-grow: 1;
flex-wrap: wrap

HTML

<div class="container">
  <div class="row flex-container">
    <div id="sectionA" class="col col-sm-12 col-md-6 a">Section A</div>
    <div id="sectionAInfo" class="col col-xs-12 a">More Info about Section A</div>
    <div id="sectionB" class="col col-sm-12 col-md-6 b">Section B</div>
  </div>
</div>

CSS

@media screen and (min-width: 991px) {
  .flex-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap
  }
  #sectionA {
    order: 1;
  }
  #sectionAInfo {
    order: 3;
  }
  #sectionB {
    order: 2;
    float: right;
  }
}

有效的代码笔 https://codepen.io/Washable/pen/zPoeqY?编辑者= 1100

这篇关于如何垂直重新排列引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！