Bootstrap 4.0 Заказ / перемещение столбцов для мобильного макета - PullRequest
0 голосов
/ 14 декабря 2018

Вот так выглядит макет в lg.

На мобильных устройствах, sm, я хочу, чтобы порядок столбцов был: 1, 3, 5, 2, 6, 4

Возможно ли и / или достаточно просто использовать Bootstrap 4.0 или переписать?

Все мои попытки с использованием order-sm 1-12 потерпели неудачу.Я не могу получить колонку 4 до конца, чтобы быть последней колонкой, однако я продолжаю.

Переместить 4 в конец на мобильных устройствах - самая важная реструктуризация, если то, что я спрашиваю, невозможно.

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
|           |     |_____|
|     3     |  4  |     |
|           |     |  5  |
|           |     |_____|
|           |_____|     |
|___________|     |  6  |
                  |     |
                  |_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </div>
</div>

РЕДАКТИРОВАТЬ: Это почти то, что я хочу, но код создает разрыв между столбцами 1 и 3. Кроме того, столбец 6 опускается ниже столбца 3. Желаемое место для столбца 6 ниже 5.

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
 _________________|_____|
|           |     |     |
|     3     |  4  |  5  |
|           |     |_____|
|           |_____|
|___________|
|     |
|  6  |
|     |
|_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-sm-1 order-md-1 order-lg-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-4 order-sm-4 order-md-4 order-lg-2'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-2 order-sm-2 order-md-2 order-lg-3'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-6 order-sm-6 order-md-6 order-lg-4'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-3 order-sm-3 order-md-3 order-lg-5'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-5 order-md-5 order-lg-6'>
        6
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Итак, если было решение этой проблемы с использованием flex и order с использованием некоторых свойств, о которых я не знаю, так тому и быть.Но у меня нет времени ждать такого ответа, поэтому я пошел на переписывание, используя jQuery с .appendTo(), отметив $(window).width() на $(window).resize().

Спасибо всем за попытку.Это моё решение.Это работает:

<script>
    $(window).resize(function()
    {
        if($(window).width() < 767)
        {
            $("#mobOrder-1").appendTo("#mobAnchor");
            $("#mobOrder-2").appendTo("#mobAnchor");
            $("#mobOrder-3").appendTo("#mobAnchor");
            $("#mobOrder-4").appendTo("#mobAnchor");
            $("#mobOrder-5").appendTo("#mobAnchor");
            $("#mobOrder-6").appendTo("#mobAnchor");
        }
        else
        {
            $("#mobOrder-1").appendTo("#mobAnchor");
            $("#mobOrder-4").appendTo("#mobAnchor");
            $("#mobOrder-2").appendTo("#mobAnchor");
            $("#mobOrder-6").appendTo("#mobAnchor");
            $("#mobOrder-3").appendTo("#mobAnchor");
            $("#mobOrder-5").appendTo("#mobAnchor");
        }
    });
</script>

<div id='mobAnchor' class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div id='mobOrder-1' class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div id='mobOrder-4' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div id='mobOrder-2' class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div id='mobOrder-6' class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div id='mobOrder-3' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div id='mobOrder-5' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </div>
</div>
0 голосов
/ 14 декабря 2018

Вы должны использовать d-flex в root, чтобы использовать ордера, которые вы используете, классы 'my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>, которые должны быть похожими на следующие.

HTML

<div class='my-5 px-3 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-1 order-sm-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-2 order-sm-4'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-3 order-sm-2'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-4 order-sm-2'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-6'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-6 order-sm-5'>
        6
    </div>
</div>

Примечание. Порядок, который я добавил в коде, может отличаться от ожидаемого, просто измените order-sm-* на нужный вам порядок.

DEMO: https://codepen.io/rahul-pxl/pen/pqgmWo

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...