Как создать альтернативные блоки в bootstrap 5

В основном у меня есть строка с 3 наборами столбцов, и мне нужен следующий макет (с использованием начальной загрузки 5), в основном изображение слева, текст справа. Следующие столбцы имеют текст слева, изображение справа и, наконец, изображение слева, текст снова справа

Image  Text
Text   Image
Image  Text

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

<div class = "col-md-6"><img src = "..." /></div>
<div class = "col-md-6">Some text</div>

<div class = "col-md-6 order-last"><img src = "..." /></div>
<div class = "col-md-6">Some text</div>

<div class = "col-md-6 order-last"><img src = "..." /></div>
<div class = "col-md-6" class = "order-last">Some text</div>

элементы макета генерируются динамически? Если это так, то какой язык программирования вы используете?

— 17.03.2022 19:41

Нет, не динамический.

— 19.03.2022 06:00

twitter-bootstrap

17.03.2022 18:20

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<div>
      <div class = "main-container d-flex flex-column flex-md-row">
        <div class = "image-container">
          <img src = "https://via.placeholder.com/100/" alt = "" />
        </div>
        <div class = "text-container">
          <p>Some dummy text </p>
        </div>
      </div>
      <div class = "main-container d-flex flex-column flex-md-row-reverse">
        <div class = "image-container">
          <img src = "https://via.placeholder.com/100/" alt = "" />
        </div>
        <div class = "text-container">
          <p>Some dummy text </p>
        </div>
      </div>
      <div class = "main-container d-flex flex-column flex-md-row">
        <div class = "image-container">
          <img src = "https://via.placeholder.com/100/" alt = "" />
        </div>
        <div class = "text-container">
          <p>Some dummy text </p>
        </div>
      </div>
    </div>

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

— 18.03.2022 02:59

Спасибо за это. Он работает до некоторой степени, но отзывчивость невелика, потому что я полагаю, что он не использует столбцы начальной загрузки. Нет ли другого способа использовать col-md, col-lg и т. д.?

— 19.03.2022 07:16

Попробуйте .. он отлично работает из-за переключения между flex-column и flex-md-row. Это обрабатывает отзывчивость на разных экранах. Однако вы можете добавить col-md-6 в контейнер изображения и текстовый контейнер, если хотите.

— 20.03.2022 10:07

17.03.2022 19:40