0

Пытаюсь разместить фотографию в одном случае слева, а в другом случае справа. С противоположной стороны от фото - текст.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container">

  <div class="row my-4">

    <div class="row col-lg-12 my-4">
      <div class="col-lg-8">
        <img class="embed-responsive" src="http://placehold.it/1024x768" alt="">
      </div>
      <div class="col-lg-4">
        <h3 class="text-center">Название 1</h3>
        <div class="text-justify">
          <p>Описание1</p>
          <div class="text-center">
            <a href="#" class="btn btn-primary">Узнать больше</a>
          </div>
        </div>
      </div>
    </div>

    <div class="row col-lg-12 my-4">
      <div class="col-lg-4">
        <h3 class="text-center">Название 1</h3>
        <div class="text-justify">
          <p>Описание2</p>
          <div class="text-center">
            <a href="#" class="btn btn-primary">Узнать больше</a>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <img class="embed-responsive" src="http://placehold.it/1024x768" alt="">
      </div>
    </div>

  </div>

</div>

При этом на малых экранах всё вытягивается в линию, а на нормальных экранах получается это (как и задумано): введите сюда описание изображения

Но с мобильного из-за того, что одно фото в коде стоит перед описанием, а второе - после, получается так, что не ясно, к какому из фото относится текст - всё вытягивается и выходит: фото, название, описание, кнопка + название, описание, кнопка, фото (смотри пример кода выше).

Можно ли как-то сделать так, чтобы на средних и больших экранах фото и текст были слева-справа друг от друга, чередуясь. А на мобильном, вытянувшись, всё шло в одном порядке: фото, название, описание кнопка?

1 ответ 1

0

Лучше воспользуйся возможностью Bootstrap 4 и сделай как карточку(Card в Components), а уже медиазапросами определи её положение.

Bootsrap 4 flex поддерживает. Через Flex можно задавать порядок элементов и пожалуйста. Ставь преоритетность на медиазапросе и всё тебе будет

Ссылка на карточку: https://v4-alpha.getbootstrap.com/components/card/ Ссылка на руководство по Flex(лучшее что я видел) http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstvam-flexbox-iz-css3.html

5
  • будет полезным помимо ссылок опубликовать пример решения вопроса автора(код)
    – Alex
    2 дек 2017 в 9:51
  • Так в том то и дело, что в том руководстве по flex всё и представлено и можно опробовать самому ползунки двигая. Карточка готова. Копируй код - используй. Отвечая на ваш вопрос(код готов, всё что нужно - выбрать нужную приоритетность а это ссылка flexa, с кодом) Каков был вопрос, таков и ответ. Вопрос: Можно ли как-то сделать так... Ответ: можно, варианты решения. Карточка + приоритетность flex(где медиазапросом редактируется порядок элементов). Как по мне, ответ соответствует вопросу. 3 дек 2017 в 11:26
  • а никто не говорил, что это не ответ) Но! важно не то какой вопрос(хороший или плохой), а то что можно увидеть в ответе. Например вы ищите ответ на какой-то вопрос, а тут ссылка. Вы перешли по ссылке, а сайт по какой-то причине не работает(например из-за "умного" росконаздора). И вместо того, чтобы скопировать код и решить свою проблему Вы пойдете в гугл, тратите лишнее время и ругаете автора ответа за лень). И хорошо если в гугле будет информация по Вашему вопросу, а бывает так что нужной информации нет или она плохо раскрыта.
    – Alex
    3 дек 2017 в 11:38
  • для росконадзора есть VPN, думаю об этом все знают. Должны знать в наших странах Но я учту это. А в данном конкретном случае, по двух ссылках находится готовый код. Копируй и всё. Не говоря о том, что обычно Веб-разработчик, тем более верстальщик постоянно что-то ищет и копирует исправляя под свои нужды, особенно в случаях с библиотеками и фреймворками, может если всё на чистом HTML и CSS пишет то да, а так в этом большая часть и заключается. Найди - скопируй - под себя заточи p.s. Последнее предложение - знаю что кэп) 4 дек 2017 в 13:25
  • роскомнадзор и последнее предложение это всего лишь пример, не более. В остальном - конечно это так.. Не сочтите за придирку, видя как можно улучшить ответ, дал Вам подсказку.
    – Alex
    4 дек 2017 в 13:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.