如何在bootstrap

时间:2015-07-09 08:31:24

标签: twitter-bootstrap twitter-bootstrap-3 media-queries

我试图仅在平板电脑版本中交换列,但我没有这样做。 我在这里分享我的代码。请仔细阅读。

    <section class="block">
        <div class="copyright container-fluid">
            <div class="container">
                <div class="row reorder-sm reorder-lg">
                    <div class="col-sm-12 col-md-6 hidden-xs visible-md visible-sm visible-lg text-center-sm text-left-md text-left-lg col-sm-push-12"><p >&copy; 2015 copy text</p></div>
                    <div class="col-sm-12 col-md-6 hidden-xs visible-md visible-sm visible-lg text-center-sm text-right-md text-right-lg col-sm-pull-12"><a href="">Terms</a>|<a href="">Privacy</a>|<a href="">Cookies</a>  </div>
                </div>
            </div>

        </div>
    </section>

但这不是拉我的div。

有人能帮助我吗?

请参阅小提琴http://jsfiddle.net/ytvfocwd/

1 个答案:

答案 0 :(得分:0)

使用推/拉类:

<div class="row">
     <div class="col-md-9 col-md-push-3">1 2 3 4 5 6 7 8 9 </div>
     <div class="col-md-3 col-md-pull-9">1 2 3 </div>
</div>

在上面的示例中,列将在断点处以相反的顺序折叠。

这是此处提供的提示:https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know

希望这有帮助!