移动向右浮动的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个< P>绿色<以上DIV>，绿框将最终在下面。
如果我在小屏幕上尝试这种不同的方法：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

您可以在内容元素上使用'左拉'，我添加了'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; 
    } 
}