使用bootstrap 3网格系统组织不同屏幕尺寸的div

Question

我需要根据屏幕尺寸定位三个div。我在我的页面上使用bootstrap的网格系统，但我遇到了一个小问题的位置

任何人都可以帮我解决这个问题吗？

提前致谢！

PS：如果需要更多细节，请告诉我。

以下是代码：

<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>

小提琴：

Fiddle

以及我希望它如何工作的图像：

Answer 1

要获得所需的布局和顺序，您需要像这样使用push pull嵌套..

<div class="row">
      <div class="col-md-6 col-md-push-6 col-xs-12">
        <div class="row">
            <div id="div2" class="col-xs-7">div2</div>
            <div id="div3" class="col-xs-5">div3</div>
        </div>
      </div>
      <div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>

我使用col单位col-7和col-5作为div 2和3（根据你的图片），但你可能需要将这些单位更改为你想要的那些列的实际单位。

演示：http://bootply.com/jFfCKhkuR3

Answer 2

您需要使用column ordering，请参阅bootstrap docs here

在div1中使用col-xs-push-12并相应地拉出其他两个div。

这里有small snippet显示col推拉的效果