Html 使用bootstrap 3网格系统在不同屏幕大小上组织div

我有三个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>

这里有一些标题文本DIV1
这里有一些跨度DIV2
第3部分中的其他跨度

小提琴：

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

---

您需要使用

列排序

，请参阅引导文档

在div1中使用

col-xs-push-12

，然后拉动其他两个div

---

这里有一个显示col push和pull的效果的示例。要获得所需的布局和顺序，需要将嵌套与push一起使用，如下所示

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

第二组
第三组
第一组

我对div的2和3使用了col单位

col-7

和

col-5

（根据您的图片），但您可能需要将这些单位更改为这些列所需的实际单位

---

演示：

这就是你想要的吗？无法使其正常工作，div只会进一步移动到屏幕外，而不是移动到顶部。谢谢！作品完美：）