響應地將左右單元格向下摺疊，中間單元格向上，使用Bootstrap

Question

我在左側有一列文字，圖像在中間，右側有另一列文字。在小屏幕尺寸上，我希望首先顯示圖像，然後顯示下面顯示的文本列。

我該怎麼做？

我的3列的樣子：

<div class="row"> 
    <div class="col-lg-3"><p>Text1</p></div> 
    <div class="col-lg-6"><img src="inmiddleorabove.png"></div> 
    <div class="col-lg-3"><p>Text2</p></div> 
</div> 

Answer 1

這是你需要什麼？試試看：

<div class="row"> 
    <div class="col-xs-12 col-lg-6 col-lg-push-3"> 
     <img src="inmiddleorabove.png"> 
    </div> 
    <div class="col-xs-3 col-lg-3 col-lg-pull-6"> 
     <p>Text1</p> 
    </div> 
    <div class="col-xs-3 col-lg-3"> 
     <p>Text2</p> 
    </div> 
</div> 

您需要首先設置列的順序爲小屏幕， 然後用column ordering爲其他屏幕尺寸推或拉你的專欄。

希望得到這個幫助。

請看這裏：http://bootply.com/y4N70nGh40