Question

我在文章中有两列，一个包含幻灯片，另一个包含文本，它们彼此并排放置，但并不总是在同一侧。我想要做的是当屏幕/窗口大小下降时，让我们说ipad尺寸我喜欢幻灯片容器坐在顶部，底部的文本可以利用屏幕尺寸。每个页面都有不同的div顺序，所以不像使用float那样简单：....我在这里读到了另一个问题，它回答了问题，但没有屏幕/窗口大小。

HTML：

<article>
<div class="column-1">
   text Content
</div>
<div class="column-2">
    slide Content
</div>
</article>

JS

$('.column-2').insertBefore('.column-1');

期望的效果：

窗口宽度＆lt; 768

第二栏顶部

第一栏底部

我拼凑了这个，但像往常一样，它不起作用。

    $(document).ready(function(){
        if ( $(window).width() < 768 ){
        $('.column-1').before($('.column-2'));
        }else{
        $('.column-2').before($('.column-1'));
         }
    });

任何人都可以提供帮助，我们将不胜感激。当窗口调整到768px以下并重新加载时，它没有读取窗口宽度。

Answer 1

可以这样做：

$(document).ready(function(){
    if ( $(window).width() < 768 ){
        $('.column-1').before($('.column-2'));
    }

    $(window).resize(function(){
        if ( $(window).width() < 768 ){
            $('.column-1').before($('.column-2'));
        }else{
            $('.column-2').before($('.column-1'));
        }
    });
});

FIDDLE：https://jsfiddle.net/lmgonzalves/ft92ba9q/3/

Answer 2

你考虑过使用FlexBox吗？不需要JavaScript或jQuery。

你可以view this example on CodePen

HTML：

<main>
  <article>
    First
  </article>

  <aside>
    Second
  </aside>
</main>

CSS：

main {
  -webkit-display: flex;
  display: flex;

  -webkit-flex-direction: column;
  flex-direction: column;
}

/* Tablet and mobile */
@media only screen and (max-width : 1024px) {
  article {
    -webkit-order: 1;
    order: 1;
  }

  aside {
    -webkit-order: 2;
    order: 2;
  }
}

/* Desktop */
@media only screen and (min-width : 1025px) {
  article {
    -webkit-order: 2;
    order: 2;
  }

  aside {
    -webkit-order: 1;
    order: 1;
  }
}

在屏幕/窗口调整大小时重新排序div列

2 个答案: