响应式布局中的Bootstrap 3排序网格列

Question

我使用Bootstrap 3并喜欢在移动布局中重新排序网格列。

桌面看起来像截图：

在手机打开的情况下，图片是自下而上的，当用户在移动版中查看时，是否无法通过重新排序网格列将图片置于顶部？

输出代码：

<div class="container">
    <div class="row">

        <div class="col-sm-8 col-lg-9">
            <div>John Smith</div>
            <div>Application Engineer</div>
            <div>
                <dl class="dl-horizontal">
                    <dt>Reg. Number</dt><dd>M8553</dd>
                    <dt>Mobile Number</dt><dd>012-5229887</dd>
                    <dt>Email</dt><dd>john.smith@email.com</dd>
                </dl>
            </div>

            <div class="row">
                <div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div>
                <div class="col-xs-12 col-lg-10">
                    <div>                              
                        <span>
                        <button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button>
                        </span>&nbsp;&nbsp;

                        <a class="btn btn-success btn-alink" role="button" href="mailto:feedback@email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a>
                    </div>
                    <div><span>0</span> liked, 63 views.</div>
                </div>
            </div>
        </div>
        <!-- /.col-lg-9 -->

        <div class="col-sm-4 col-lg-3">
            <img src="images/john-smith.jpg" alt="john-smith">
        </div>
        <!-- /.col-lg-3 -->

    </div>
    <!-- /.row -->
</div>

Answer 1

看看这个

列排序 使用.col-md-push- *和.col-md-pull- *修饰符类轻松更改内置网格列的顺序。

继承人http://getbootstrap.com/css/