Можно ли выполнить эту раскладку в BS4? - PullRequest
Новая
       5

Можно ли выполнить эту раскладку в BS4?

0 голосов
/ 02 июня 2018

У меня есть сайт, который использует BS4.Есть один блок контента, который я хотел бы изменить так, чтобы контент был сложен (заголовок, затем изображение, затем контент), когда он находится на мобильном устройстве, и он переключается на изображение слева с заголовком и копирование справа.

@media screen and (min-width:992px) {
    .float-md-right {
        float: right;
    }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6 text-center float-md-right">
          <h1>Title</h1>
        </div>
        <div class="col-md-6 text-center">
          <img src="https://placeimg.com/400/400/any" style="margin:10px">
        </div>
        <div class="col-md-6 float-md-right">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget vulputate sem, in semper arcu. Aenean eget leo eu libero condimentum bibendum. Pellentesque quam nulla, scelerisque ut pretium eget, ultricies non nisl. Fusce quis justo ullamcorper, aliquam
            urna consequat, porta justo. Pellentesque a suscipit purus. Ut ullamcorper efficitur diam, eu rutrum lorem facilisis in. Phasellus tincidunt nec elit non dapibus. Cras non vulputate neque. Maecenas nec lobortis urna, id rhoncus sem. Mauris
            facilisis, ante at ornare faucibus, mi lorem congue ligula, non interdum neque risus ac quam. Pellentesque porta tincidunt tortor ac euismod. Sed maximus felis fermentum tincidunt dapibus. Morbi pretium porta augue, id varius tellus sodales
            eu.
          </p>
        </div>

      </div>
    </div>
  </div>
</div>

См. Выше на Codepen

(мне кажется, я не могу заставить CSS работать в этом.работает на Codepen.)

В настоящий момент мне кажется, что это работает только с использованием BS3, при этом один элемент, заимствованный из BS4 ( отзывчивые числа с плавающей точкой ), добавлен в CSS вручную.

Итак, у меня есть два вопроса:

  1. Есть ли более простой способ сделать это с BS3, который мне не хватает?
  2. Возможно ли это привсе в BS4?
...