Сетка bootstrap 4

319

04 декабря 2017, 15:14

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

<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>

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

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

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

Answer 1

Лучше воспользуйся возможностью 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