如何垂直重新排序引导列

Question

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

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

虽然以前曾多次询问过......

• 如何在移动布局上更改Bootstrap 3列顺序？
• 使用Twitter Bootstrap响应性地重新排序div？
• Bootstrap 3：折叠时更改.col-X元素的垂直排序
• Bootstrap 3网格折叠顺序

所有这些答案都依赖于使用bootstrap的push | 拉类，它在一行内左右移动。 如果我们在这些线程中接受建议并从上面的移动布局开始，全宽A.1部分将占据整个第二行的宽广布局，此时左右移动的东西没有任何好处，除了将这些项目隐藏在屏幕之外。

问 ：无论如何根据屏幕尺寸垂直移动项目？

演示jsFiddle | StackSnippets

 .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> 

Answer 1

您可以使用flexbox实现此目的。

所有三个盒子都需要在Flex容器display: flex; 。 然后，您可以为Flex容器中的所有div提供一个命令，该命令使用所需屏幕宽度order: 1;的媒体查询启动order: 1; 。

CSS的其他主要部分用于确保将三个框正确地放入列中。

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;
  }
}

一个工作的codepen https://codepen.io/Washable/pen/zPoeqY?editors=1100