Как изменить порядок делений в мобильном представлении? - PullRequest
Новая
       10

Как изменить порядок делений в мобильном представлении?

0 голосов
/ 17 апреля 2020

В этом примере я хотел бы, чтобы мой столбец изображений располагался ниже столбца текстовой информации в мобильном представлении. Как бы мне этого добиться?

Я пытался использовать flexbox, но если бы мне не повезло, я был бы очень признателен, если бы кто-нибудь смог мне это объяснить. Спасибо 

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="img/buy1.png" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="img/buy-icon.png" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Используйте дисплей: flex и порядок. Изменить номер заказа, чтобы изменить положение на экране. Кроме того, вам нужно иметь медиа-запрос для меньшего экрана. Чтобы увидеть весь эффект, отметьте его на полной странице и перетащите экран. 

@media screen and (max-width: 750px) { 
    .row{
        display:flex;
        flex-direction: column;
        flex-flow: row wrap;
  
    }
  div.text-test2{
    background:red;
    order: 1;
  }
  .col-lg-4{
    background:green;
    order: 2;
  }

.purchase-icon-left{
    background:blue;
    order: 3;
  }
}
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-12">
            <img src="http://tineye.com/images/widgets/mona.jpg" class="img-fluid phone1" width="300" height="auto" alt="buy icon">
        </div>

      <div class="col-lg-8 col-md-12">
        <div class="info-container">
            <div class="purchase-icon-left">
                <img src="http://tineye.com/images/widgets/mona.jpg" class="purchase-icon" alt="buy icon">
            </div>

            <div class="text-test2">
                <h1 class="title">SEEK</h1><h2 class="not-bold">and you will find.</h2>
                  <ul>
                        <li>Discover your desired items by browsing through eight different categories.</li>
                        <li>Browse through thousands of items sold by other users. </li>
                        <li>Don't agree with the price? Message the seller and request a price deduction. </li>
                  </ul> 
            </div>

       </div>

    </div>
</div>
0 голосов
/ 17 апреля 2020

Посмотрите на приведенный ниже код.

Сначала изображение находится над текстом, но как только ширина становится меньше 400 пикселей, оно переходит к тексту ниже. Для этого используются два класса .computer-only и .mobile-only, которые определены в CSS с помощью запроса @media. 

.mobile-only {
  display: none;
}

@media (max-width: 400px) {

  .mobile-only {
    display: block;
  }

  .computer-only {
    display: none;
  }
  
}
<img class="computer-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

Welcome to stackoverflow!

<img class="mobile-only" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">

Чтобы применить это к своему примеру, игнорируйте код HTML, но добавьте CSS к своим стилям. Затем вы можете добавить эти два класса к любым нужным элементам.

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

...