移動向右浮動的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; 
    } 
}