Нажимаем центр Div на верх контента на мобильных устройствах

Question

Я пытаюсь разместить элемент col-md-6 в верхней части моего веб-сайта на мобильном устройстве, чтобы оба элемента col-md-3 накладывались друг на друга.

<div class="row">
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 1
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="header">
                middle
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 2
            </div>
        </div>
    </div>
</div>

Answer 1

Для этого вам не нужен дополнительный CSS. Просто используйте Bootstrap order* классы ...

   <div class="row">
        <div class="col-md-3">
            <div class="box">
                <div class="header">
                    sidebar 1
                </div>
            </div>
        </div>
        <div class="col-md-6 order-first order-md-0">
            <div class="box">
                <div class="header">
                    middle
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="box">
                <div class="header">
                    sidebar 2
                </div>
            </div>
        </div>
   </div>

https://www.codeply.com/go/qMj32Mt0Ke

Answer 2

Если вы установите элемент .row как display: flex (пример показан внутри медиа-запроса, но может быть выполнен вне запроса), то вы можете использовать свойство order, чтобы упорядочить порядок элементов flex.Используя flex-direction: column, вы можете переместить элементы по вертикали.Вы можете установить порядок для всех элементов, но значение -1 для одного элемента обеспечит верхнее размещение, если другим не назначен порядок.

@media screen and (max-width: 800px) {
    .row {
        display: flex;
        flex-direction: column;
    {
    .col-md-6 {
        order: -1;
    }
}