Сдвиг соседних ячеек сетки (без полного переупорядочения)

Используя bootstrap v4.0, я работаю над макетом сайта, который показывает правую боковую панель, когда экран находится в режиме XL. в боковой панели есть много-много предметов. я хочу поменять местами 2 коробки где-то посередине.

в Bootstrap 3 вы можете постепенно перемещать клетки влево или вправо. Bootstrap 4, я вижу, что есть способ переупорядочить весь столбец, и есть способ отправить ячейку, чтобы быть первым или последним. но я не могу понять, как сдвинуть 1 ячейку только на 1 шаг (в основном, перепрыгнуть через соседнюю ячейку). в моей ситуации посмотрите, как 2 и 3 (должны) изменить порядок при изменении размера с L на XL

000000000       000000 1111
1111 2222  ==>  000000 3333
333333333       000000 2222
444444444       000000 4444
555555555       000000 5555

я нашел решение для своей ситуации, применив классы order-xl-N ко всем полям боковой панели (кажется, что их применение только к некоторым полям не работает). ощущается как промах.. так мне любопытно может я что-то упустил? если на боковой панели 20 элементов, нужно ли им всем иметь классы порядка N, чтобы только 2 из них поменялись местами в середине стека?

Вот моя личная ситуация HTML-разметка.

<div class="row">
    <div class="col-12 col-xl-8">box 0</div> 
    <div class="col-12 col-xl-4">
        <div class="row">
            <div class="col-12 col-lg-7 col-xl-12">box 1</div>
            <div class="col-12 col-lg-5 col-xl-12">box 2</div>
            <div class="col-12 d-block">box 3</div>
            <div class="col-12">box 4</div>
            <div class="col-12">box 5</div>
        </div>
    </div>
</div>

в то время как я ищу элегантное решение для моей ситуации, было бы неплохо использовать обобщенное. На некоторых страницах я расставляю приоритеты в блоке 5 и помещаю его поверх боковой панели XL, чтобы избежать сложной логики упорядочения, я хочу, чтобы мои классы влияли только на коробки 2 и 3.. все это для моего проекта загрузки видео в Facebook.. социальное социальное скачивание видео..

Источник

1 ответ

  • да, вы должны использовать флексбоксы CSS3, чтобы переупорядочить ваши div.

  • Вы можете сохранить код, заменив col-12 col-lg-7 только на col-lg-7. Попробуй, увидишь.

Источник
Другие вопросы по тегам