Bootrap 4 - текст на экране слева от изображения ... на смартфоне текст под изображением

Question

С Bootstrap 4 (возможно, также и со всеми другими версиями), как мне убедиться, что у меня есть текст на экране слева от изображения и что изображение находится над текстом на смартфоне?

Это мой исходный код:

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
</div>
</div>

flex-direction: row-reverse здесь не работает.

Answer 1

Лучший способ - добавить два класса к двум внешним элементам div с классом row . Затем используйте медиазапросы, чтобы скрыть div в зависимости от размера экрана, поэтому ваш код должен выглядеть следующим образом.

<div class="container">
<div class="row desktopView">
<div class="col-lg-6 col-md-6">Text</div>
<div class="col-lg-6 col-md-6">Image</div>
</div>
<div class="row mobileView">
<div class="col-sm-6 col-xs-12">Image</div>
<div class="col-sm-6 col-xs-12">Text</div>
</div>
</div>


@media (max-width: 576px) {
.desktopView {
  display: none;
}
.mobileview {
  display: block;
}
}

@media (min-width: 576px) {
.mobileview {
  display: none;
}
}

Сначала вы скрываете мобильный div в представлении на рабочем столе и отображаете его в мобильном представлении. Надеюсь, что помощь @ davideos477

Answer 2

• Если вы используете bootstrap-4 и вам нужна 100% ширина на мобильном телефоне, поэтому не нужно включать col-xs или sm классы.
• И bootstrap-4 использует flexbox. С помощью flexbox вы можете легко заказать ваш div на другом экране.
• Для заказа bootstrap вы можете использовать order-* класс. И order класс также в соответствии с экраном, как: order-sm-* или order-md-*
• Bootstrap 4 сетки пример: Bootstrap 4 Пример сетки
• Для понимания порядка flexbox. Пожалуйста, проверьте Заказ Flexbox

<div class="container">
    <div class="row">
        <div class="col-md-6 col-12">Text</div>
        <div class="col-md-6 col-12">Image</div>
     </div>
    <div class="row">
        <div class="col-md-6 col-12">Image</div>
        <div class="ccol-md-6 col-12">Text</div>
    </div>
</div>

Answer 3

Используйте .order классы для позиционирования изображения:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-12">Text</div>
    <div class="col-md-6 col-12 order-first">Image</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-12 order-first">Image</div>
    <div class="col-md-6 col-12">Text</div>
  </div>
</div>

https://getbootstrap.com/docs/4.4/layout/grid/#order -классы

Вы также можете добавить их в зависимости от ширины с помощью обычные теги xs, sm, md, lg и xl, например .order-md-first

https://jsfiddle.net/Sirence/cx6k1048/4/