Как сделать нечетные / четные столбцы в Bootstrap 4? - PullRequest
Новая
       13

Как сделать нечетные / четные столбцы в Bootstrap 4?

0 голосов
/ 26 августа 2018

У меня есть раздел, который должен содержать изображение слева и текст справа, а в следующем столбце я имею в виду противоположный, я имею в виду текст слева и изображение справа. Это мой HTML: 

<section>
        <div class="container">
            <div class="row no-gutters">
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-desc">
                        <p>text</p>
                    </div>
                </div>
                <div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
            </div>
        </div>
    </section>

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

Что делать?

1 Ответ

0 голосов
/ 26 августа 2018

Для этого вы должны использовать служебные классы заказа flexbox. Flexbox Order Bootstrap

Откройте фрагмент в полноэкранном режиме.

Добавьте order-2 order-md-1 к тексту и order-1 order-md-2 к изображению.Кроме того, чтобы это работало, мне пришлось обернуть текст и изображение с помощью div с классом row

order-2 order-md-1, что означает, что на самых маленьких устройствах сделать заказ элемента 2 и на средних и после этого сделайте заказ 1

Обновление : Вы можете добавить align-items-center, чтобы грести в ряд по центру вертикально 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6 ">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6 ">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
      <div class="col-md-6">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 order-2 order-md-1">
        <div class="feature-desc">
          <p>text</p>
        </div>
      </div>
      <div class="col-md-6 order-1 order-md-2">
        <img src="https://placehold.it/100x100" alt="" class="img-fluid">
      </div>
    </div>
  </div>
</section>
...