将引导网格重新排列为不同数量的列而不重复代码答案

【问题标题】：Rearrange bootstrap grid into different numbers of columns without code duplications将引导网格重新排列为不同数量的列而不重复代码
【发布时间】：2016-12-07 12:38:21
【问题描述】：

我在重新排列 div 框时遇到问题。

我需要两个版本：

移动（彼此下方一列）：

<div>A</div>
<div>B</div>
<div>C</div>

任何其他（中间的从其他两个之间滑出）：

<div class="col-lg-4">
<div>A</div>
<div>C</div>
</div>
<div class="col-lg-8">
<div>B</div>
</div>

我可以通过代码重复和可见/隐藏对来管理这个问题，但是没有这些是否有解决方案？特别是我不想要代码重复...

谢谢，

编辑：

不幸的是，我忘了补充还有一个并发症：

我需要在整个 ABC 的东西下有几个 100% 宽度的元素，而 B 元素的高度会发生变化......

此设置显示 D 和 B 重叠。我想把 D 放在 B 下...：

<div class="container">
  <div class="row parent-row">
    <div class="col-lg-4 div-wrap">
    <div class="a">A</div>
    <div class="b">B<br>B<br>B<br>B<br>B</div>
    <div class="c">C</div>
    <div class="d">DDDDDDDDDDD DDDDDDDDD DDDDDDDDDDDDDDDDD DDDDD DDDDDDDDDDDDDDDDDD DDDDDDDDDDDDD DDDDDDDD DDDDDDDDDDDDDD</div>
   </div>
 </div>
</div>

@media (min-width: 1200px) { 
  .b{
    position:absolute;
    top: 0;
    right:0;
    width: 66.66666667%;
    padding-right: 15px;
    padding-left: 15px;
    min-height:1px;
  }

  .d{
    position:absolute;
    right:0;
    width:100%;
    padding-right: 15px;
    padding-left: 15px;
    min-height:1px;
  }


  .div-wrap{
    position:initial;
    clear:both;
  }

  .parent-row{
    position:relative;
    clear:both;
  }
}

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

看看这是否对你有用： http://codepen.io/panchroma/pen/xRqgJe

重要的是，当视口比堆叠的移动视图宽时，您可以使用媒体查询通过应用 'position:absolute' 使 div 'B' 脱离正常流程。同时，您手动为 'col-lg-8' div 应用 Bootstrap CSS 样式，并调整其父级（.div-wrap 和 .parent-row）的位置，以便 .B 浮动到正确的位置。

祝你好运

HTML

<div class="container">
  <div class="row parent-row">
    <div class="col-lg-4 div-wrap">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
   </div>    
  </div>
</div>

CSS

@media (min-width: 1200px) { 
  .b{
    position:absolute;
    top: 0;
    right:0;
    width: 66.66666667%;
    padding-right: 15px;
    padding-left: 15px;
    min-height:1px;
  }

  .div-wrap{
    position:initial;
  }

  .parent-row{
    position:relative;
  }

}

【讨论】：

感谢您的回答！

【解决方案2】：

您不需要使用绝对位置。改为应用 float: right; 和 clear: left; 属性。

我测试了两种情况：

区块A高于B
块B高于A

请查看结果：http://codepen.io/glebkema/pen/dOezEz

/* Heart of the matter */
@media (min-width: 1200px ) {
  .clear-lg-left {
    clear: left;
  }
  .pull-lg-right {
    float: right !important;
  }
}

/* Tests */
.tests {
  margin-top: 14px;
}
.tests > div {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}
.tests > div:nth-of-type(1) { background: #9c6; min-height: 120px; }
.tests > div:nth-of-type(2) { background: #f93; min-height: 80px; }
.tests > div:nth-of-type(3) { background: #69c; min-height: 80px; }
.test-2 > div:nth-of-type(2) { background: #f93; min-height: 160px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row tests">
    <div class="col-lg-4">A</div>
    <div class="col-lg-8 pull-lg-right">B</div>
    <div class="col-lg-4 clear-lg-left">C</div>
  </div>
  <div class="row tests test-2">
    <div class="col-lg-4">A</div>
    <div class="col-lg-8 pull-lg-right">B</div>
    <div class="col-lg-4 clear-lg-left">C</div>
  </div>
</div>

【讨论】：