在响应式页面上向下移动右浮动div

Question

我需要得到你可以在这里看到的结果： Fiddle 1（尝试调整渲染窗口的大小）

<div>
    <div class="pull-right col-xs-12 col-sm-6">
        <p>Content 2</p>
    </div>
    <p>Content 1</p>
</div>

我的绿色盒子在蓝色盒子里面浮动，蓝色盒子里面的文字应该在绿色盒子下面再长一点。 但是当屏幕较小时，绿色框采用全宽，我需要它低于蓝色框，而不是像现在一样。 我需要在普通/大屏幕上使用它：

这在小屏幕上：

如果我把内容1＆lt; p>在绿色之上＆lt; div＆gt ;,绿框将在下面结束。
如果我尝试这种不同的方法：Fiddle 2， 在小屏幕上它按照我想要的方式工作，但在正常屏幕上，蓝色框中的文字在更长时间内不会继续低于绿色文本。
似乎是一个愚蠢的问题，但我找不到任何解决方法......有什么建议吗？

Answer 1

    <div class="pull-right col-xs-12 col-sm-6">
<div style="background-color: cyan">
    <p>Content 1<br/>More content</p>
    <div style="background-color: green">
        <p>Content 2</p>
    </div>
    </div></div>

这是你要找的吗？

Answer 2

你可以在你的内容元素上使用'pull-left'，我添加了一个'div'作为内容容器。

将内容2移到底部，所以当它是一个小屏幕时，它将在

之下

<强> DEMO

HMLT

<div class="parent"> 
    <div class="pull-left">
        <p>Content 1<br/>More content</p>
    </div>
    <div class="pull-right col-xs-12 col-sm-6 green">
        <p>Content 2</p>
    </div>
</div>

CSS

.parent{
    background-color: cyan;
    display: inline-block;
    width: 100%;
}

.green{
    background-color: green;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .green{
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
.green{
        position: absolute;
        top: 0;
        right: 0;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
.green{
        position: absolute;
        top: 0;
        right: 0;
    }
}