[問題] Bootstrap網頁布局問題

[shinmoja (摩喳)]

各位前輩好，

最近初學Bootstrap，在網頁上呈現的樣式：

┌───┐  ┌───┐
│ 圖片 │  │ 文字 │
└───┘  └───┘
┌───┐  ┌───┐ |
│ 文字 │  │ 圖片 │ |----->圖文變換位置
└───┘  └───┘ |
┌───┐  ┌───┐
│ 圖片 │  │ 文字 │
└───┘  └───┘

手機端呈現：

┌───┐
│ 圖片 │
└───┘
┌───┐
│ 文字 │
└───┘
┌───┐ |
│ 文字 │ |
└───┘ |-----> 這裡想改順序
┌───┐ |
│ 圖片 │ |
└───┘ |
┌───┐
│ 圖片 │
└───┘
┌───┐
│ 文字 │
└───┘

想請問一下，想讓手機上看到的樣式

┌───┐
│ 圖片 │
└───┘
┌───┐
│ 文字 │
└───┘
┌───┐ |
│ 圖片 │ |
└───┘ |-----> 變成這樣子
┌───┐ |
│ 文字 │ |
└───┘ |
┌───┐
│ 圖片 │
└───┘
┌───┐
│ 文字 │
└───┘

應該要如何修正才好？



[HTML如下]

<div id="">
        <div class="">
                <div class="row row-pb-md animate-box" style="padding-bottom:100px;">
                        <div class="col-md-6 col-md-push-6">
                                <div class="desc">
                                        <h></h>
                                        <p></p>
                                </div>
                        </div>
                        <div class="col-md-6  col-md-pull-6">
                                <img>
                        </div>
                </div>

                <div class="row row-pb-md animate-box" style="padding-bottom:100px;">
                        <div class="col-md-6 col-md-push-6">
                                <img>
                        </div>
                        <div class="col-md-6 col-md-pull-6">
                                <div class="desc">
                                        <h></h>
                                        <p></p>
                                </div>
                        </div>
                </div>
        </div>
</div>

再麻煩各位了，謝謝!!

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.161.144.213
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1482048282.A.0EE.html
推 nottt: http://codepen.io/anon/pen/xRMKMe
→ nottt: html結構一律都是先圖後文，只利用push和pull調整PC版面
!!原來如此 謝謝no大的幫助
※ 編輯: shinmoja (1.161.144.213), 12/18/2016 22:31:42
推 sa0124: 哇 好強 原來可以這樣做 （筆記
推 andy8050802: 酷