Блог

Главная - Вопросы по программированию - Как разместить правую колонку над левой колонкой в начальной загрузке при сжатии страницы, а не наоборот?

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

#html #css

Вопрос:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
    crossorigin="anonymous"
  />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
  />
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"
  ></script>
</head>
<body>

<div class="container-fuild padding">
    <div class="row padding">
        <div class="col-lg-4">
            <h2>Our padding</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicin
                g elit. Nostrum, officiis.</p>
                <p>Lorem ipsum dolor sit amet.</p>
            
        </div>
        <div class="col-lg-8">
            <img src="https://via.placeholder.com/300/09f/fff.png

            C/O https://placeholder.com/" alt="" class="img-fluid">
        </div>
    </div>
</div>


</body>
</html>

введите описание изображения здесь

Вот и весь код, который я использую

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

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

Комментарии:

1. Используйте flexbox и установите a flex-direction: reverse; . Вы пробовали это

2. Я хочу сделать это во время использования начальной загрузки

3. Гибкий — Загрузочный загрузчик имеет гибкие возможности

4. ПРИВЕТ, спасибо до сих пор! У меня все еще есть небольшие проблемы с этим. Я ставлю flex-sm-обратный столбец на заполнение строк, и он перемещается таким образом, когда он большой. Я хочу, чтобы так было, когда он кричит, чтобы см, а когда больше, чтобы все было так, как было

5. Не могли бы вы, пожалуйста, добавить свой CSS и HTML или создать скрипку?

Метки: ,