0

Вот пример как сейчас: enter image description here Вот как нужно: enter image description here

Есть такие блоки на bootstrap 4 , нужно сделать чтобы коричневый блок стал на уровень с синим, а желтый внизу на всю ширину выстроился внизу, при смене разрешения. Или как можно реализовать такое. Вот код текущей верски `

    <div class="row  d-flex flex-row ">
        <div class="col-xl-6 col-md-6 col-xs-6" style="background-color: blue;">Эта колонка выше чем все остальныне <br>
        Эта колонка выше чем все остальныне
        Эта колонка выше чем все остальныне
        Эта колонка выше чем все остальныне
        Эта колонка выше чем все остальныне
    </div>
    <div class="clearfix"></div>
        <div class="col-xl-6">
            <div class="row d-flex flex-xl-column">
                <div class="col-xl-12 col-lg-12 col-md-6 col-xs-6" style="background-color: brown;">Эта колонка выше чем все остальныне <br>
                    Эта колонка выше чем все остальныне
                    Эта колонка выше чем все остальныне
                    Эта колонка выше чем все остальныне
                    Эта колонка выше чем все остальныне
                </div>
                <div class="clearfix"></div>
                <div class=" col-xl-12 col-lg-12 col-md-12 col-xs-12" style="background-color: yellow;">Эта колонка выше чем все остальныне <br>
                Эта колонка выше чем все остальныне
                Эта колонка выше чем все остальныне
                Эта колонка выше чем все остальныне
                Эта колонка выше чем все остальныне</div>
            </div>
        </div>
    </div>
   </div>
    </div>
</div>`

1 ответ 1

0

Искал варианты на эту тема, Вариант скрывать в оном месте и показывать блок вниз, но это дублирование кода, что не есть хорошо. Нашел решение динамический адаптив на Javascript называется, когда ты с помощью JS вырезаешь блок из одного места, при определенном расширении экрана, и вставляешь в другое место. Вот видео на тему https://www.youtube.com/watch?v=QKuMr575vlQ

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.