Блог

У меня есть требование, например, отображать Div в виде столбцов при включенном мобильном режиме. Позвольте мне объяснить мое требование. допустим, у меня есть 3 строки по 4 div в каждой, как показано ниже

Div1 Div2 Div3 Div4 Div5 Div6 Div7 Div8 Div9 Div10 Div11 Div12

Когда включен мобильный режим, приведенный выше Div будет отображаться, как показано ниже, с одной строкой, поскольку код находится в адаптивном режиме

Div1 Div2 Div3 Div4 Div5 Div6 Div7 Div8 . . . Div12

Но мне нужно отображать в виде столбцов в режиме рабочего стола, т. Е. Мне нужно сортировать с помощью jquery так, чтобы Divs отображались как

Div1 Div5

Div9

Div2 Div6

Div10

Div3 Div7

Div11

Div4 Div8 Div12

Не мог бы кто-нибудь, пожалуйста, помочь мне выполнить вышеуказанную сортировку с помощью jquery?

Этого было бы легче достичь с помощью медиа-запросов, я предлагаю вам взглянуть:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Я бы также предложил взглянуть на Bootstrap (https://getbootstrap.com/docs/4.3/layout/grid /) поскольку это обеспечило простой способ выполнить то, что вы ищете, с минимальными усилиями с точки зрения CSS.

Пример:

 <div class="container-fluid">
  <div class="row">
    <div name="div1" class="col-sm-12 col-lg-6">
      your content
    </div>
    
    <div name="div2" class="col-sm-12 col-lg-6">
      your content
    </div>
  </div>
</div>  

В этом примере кода будет использоваться сеточная система Bootstraps (12 столбцов слева направо) и разделять пространство между разделениями на основе того, что вы укажете. В этом случае, когда экран имеет ширину 576 пикселей, разделы будут располагаться друг над другом, а если экран имеет ширину 992px или более, они будут располагаться рядом друг с другом.

Возможно, моего объяснения немного не хватает, но я определенно рекомендую ознакомиться с документацией.