3 div动态安排与bootstrap 3

Question

我目前连续有3 divs，在red设备上按green，blue，xs的顺序堆叠。

在md设备上，我希望blue位于red正下方，如果red的高度超过green，则不会发生<div class="row"> <div class="red col-md-6"> <!-- content --> </div> <div class="green col-md-6"> <!-- content --> </div> <div class="blue col-md-6"> <!-- content --> </div> </div> 。

这是布局：

blue

如果我将row放在单独的red中，当green的高度大于red的高度时，{{1}}会导致不必要的空格。

Answer 1

试试这个：http://jsfiddle.net/U4Yer/

HTML：

<div class="row">
  <div class="col-md-6 col-xs-6 no-padd">
     <div class="red">content 1</div>
     <div class="blue">content 1</div>
  </div>
  <div class="green col-md-6 col-xs-6 no-padd">
    Content 3
  </div>
</div>

CSS：

.red { background: red; }
.blue { background: blue; }
.green { background: green; height:200px; } 
.no-padd { padding: 0; }