Question

当屏幕尺寸低于768时，我想重新排列一些div ... 如果您仔细查看下面的HTML，那么您将看到结构位于2列中。当屏幕尺寸低于768时，我希望将其排列为

中的第一个元素

是否有任何jquery插件或其他内容，以便您可以移动div？

<div class="container-fluid">
    <div class="row clearfix">
        <!-- Left Col -->
        <div class="col-xs-12 col-md-6 nopad">
            <div class="col-contain pull-right">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="logo">
                        <a href="#" class="logo-brand">
                            <img src="_assets/img/logo.png" class="img-responsive" alt="" title="" />
                        </a>
                    </div>
                </div>
            </div>
            <figure class="img-text-box large first" style="background: transparent url(images/large-1.jpg) 0 0 no-repeat; background-size:cover;">
                <img src="images/large-1.jpg" style="visibility:hidden;" />
                <figcaption class="col-contain pull-right text">
                    A text here
                </figcaption>
            </figure>
            <section class="press module clearfix">
                Some content here
            </section>
            <section class="newsletter clearfix">
                Some content here
            </section>
        </div>
        <!--- Right Col -->
        <div class="col-xs-12 col-md-6 nopad">
            <nav class="navbar navbar-default cl-effect-5" role="navigation">
                A navigation here
            </nav>
            <figure class="img-text-box large second" style="background: transparent url(images/large-2.jpg) 0 0 no-repeat; background-size: cover;">
                <img src="images/large-2.jpg" style="visibility:hidden;" />
                <figcaption class="text">
                    A text here
                </figcaption>
            </figure>
            <section class="news module clearfix">
                Some content here
            </section>
            <section class="countdown module clearfix">
                Some content here
            </section>
        </div>
    </div>
    <div class="row">
        <footer>
            My footer
        </footer>
    </div>
</div>

Answer 1

你可以做到响应，因为为了制作你的css，你应该了解@media screen

   @media(max-width:390px), @media(max-width:480px).. etc

还有一个过程，如果你有限制的没有。 div，然后你可以通过jQuery做到这一点：

  screen.width
  screen.height
  screen.availWidth
  screen.availHeight
  screen.colorDepth
  screen.pixelDepth

重新排列divs / dom元素

1 个答案: