Bootstrap 3.缩小屏幕时，在两个侧面部分之间拆分主要部分

Question

如何设计我的引导程序布局，使得侧面部分通常会出现在主要部分的旁边，但是当打破到较小的视图时，主要部分会在它们之间分开。如下图所示。

Answer 1

当您想要在某些屏幕宽度上显示另外两个元素之间的元素，并将其放在页面中不同宽度的其他位置时，您有三个操作过程：

1. 在两个地方显示并使用适当的@media查询隐藏每个地方。不是特别微妙或优雅，但非常有效，因为它需要最少的编码。但是，如果您的元素具有相当大的尺寸（即：是主要内容），那么这是一个非常糟糕的解决方案，因为它几乎可以使页面大小翻倍。
2. 使用在窗口JavaScript事件上触发的resize函数在DOM中移动元素。这通常是可以接受的，因为它增加了很多灵活性（没有任何布局/ CSS限制或挑战）。
3. 如果可能，请使用CSS制作三个元素兄弟并重新排序。这是最好的解决方案，但并非总是可行。

但是，在您的情况下，第三种解决方案是可以实现的：

第一步是使用三个兄弟（使用CSS）渲染所需的布局，而不是在Bootstrap列中将其中两个分组。您需要从

的正常Bootstrap布局切换

row
  col-sm-4
    1. red
    3. green
  col-sm-8
    2. yellow

到：

row 
  col-sm-8 {float:right} 
    2. yellow 
  col-sm-4 
    1. red    
  col-sm-4 {clear:left} 
    3. green 

以上适用于宽度超过768px的设备。由于我们正在使用彩色div，我还添加了负余量黑客，以使.green和.yellow div填满.row中的剩余空间（取决于哪一个更长） ），但这完全是可选的。

我们为什么要让他们成为兄弟姐妹？因此，我们可以使用flexbox的{​​{1}}属性在较窄的屏幕上重新排序。

这里是代码：

order

.red {
  background-color: #E81829;
}
.green {
  background-color: #24AA4A;
}
.yellow {
  background-color: #FDC32D;
}
.mySpecialRow > * >p:first-child:first-letter {
  font-size: 4.2rem;
  margin: 0 1.5rem;
  float: left;
}
@media (min-width: 768px) {
  .mySpecialRow {
    overflow: hidden; 
  }
  .mySpecialRow .yellow {
    float: right;
  }
  .mySpecialRow .yellow, .mySpecialRow .green {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
  }
  .mySpecialRow .green {
    clear: left;
  }
}
@media (max-width: 767px) {
  .mySpecialRow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .yellow {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .green {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
}