Css 引导列中的子列重新排序

我有一个基本的3列布局（），但无法在最后一列中的元素的大屏幕上交换文本/图像位置。在移动/平板电脑设备上，列堆叠正常。 我使用的是Bootstrap3.2。查看小提琴的细节。 以下是html代码：

<div class="container">
<div class="row front">
    <div class="col-lg-4">
        <img class="img-responsive" src="holder.js/350x350" />
         <h2>I, Roommate</h2>

        <p>Oh sure! Blame the wizards! Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p>
    </div>
    <div class="col-lg-4">
         <h2>The Farnsworth Parabox</h2>

        <p>I just told you! You've killed me! With a warning label this big, you know they gotta be fun! When will that be? Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor. Mor's good friend, Richard Nixon. Say it in Russian</p>
        <img class="img-responsive" src="holder.js/350x350" />
    </div>
    <div class="col-lg-4">
        <div class="row">
            <div class="col-lg-12 col-sm-12">
                 <h2>A Pharaoh to Remember</h2>

                <p>With a warning label this big, you know they gotta be fun! Moving along… Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Why would I want to know that.</p>
            </div>
            <div class="col-lg-12 col-sm-12">
                <img class="img-responsive  col-sm-push-4" src="holder.js/350x350" />
            </div>
        </div>
    </div>
</div>

一、 室友
哦，当然！怪那些巫师！本德，这是弗莱的决定…他做错了。所以我们该干涉他的生活了。老兄，我浑身酸痛。我觉得我刚和强大的雷神打了十回合

法恩斯沃思抛物线盒
我刚告诉过你！你杀了我！有这么大的警告标签，你知道他们一定很有趣！什么时候？老兄，我浑身酸痛。我觉得我刚和强大的雷神打了十回合。莫尔的好朋友理查德·尼克松。用俄语说

值得纪念的法老
有这么大的警告标签，你知道他们一定很有趣！继续…本德，这是弗莱的决定…他错了。所以我们该干涉他的生活了。莫博听不懂他的提词器，因为他忘了你怎么说那封形状像戴帽子的人的信。我为什么要知道这些

已经尝试了第3列中的推/拉元素，但内容刚刚溢出屏幕边缘或第2列。

---

你知道如何解决这个问题吗？

不可能垂直交换……也许你需要复制信息并使用可见/隐藏。或者一个简单的Jquery函数我的5美分是，如果您添加推/拉类，顺序将交换，就像顶级列一样：