Bootstrap 4: упаковка и оформление заказа

Question

Я обертываю текст вокруг изображения, которое работает, но когда я масштабируюсь до ширины мобильного устройства, изображение должно упорядочиваться в последнюю очередь и следовать за текстом, а не до.

Когда я удаляю, он работает, но, конечно, текст больше не оборачивается вокруг изображения.

Вот скрипка:

https://jsfiddle.net/cyzj1xrw/

код:

<div class="container">
    <div class="row">

        <div class="col-12">

            <div class="col order-last">
                <img src="http://via.placeholder.com/350x150" alt="" style="" class="float-md-left float-none mr-3 mb-3 about-img">
            </div>

            <div class="col order-first">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam
                reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione limaiores sunt nisi. Assumenda,
                consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error isteneque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.bero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
            </div>

        </div>

    </div>
</div>

Answer 1

Спасибо большое. Изображение должно быть отзывчивым, поэтому я пришел к этому решению.

Fiddle:

https://jsfiddle.net/5tngyLb0/1/

Код:

<div class="container my-5">

    <div class="row">

        <div class="col-12">

            <div class="d-sm-flex d-md-block row">
                <div class="col col-12 col-md-6 order-sm-last order-md-0">
                    <img src="https://www.w3schools.com/howto/img_fjords.jpg" class="img-fluid float-md-left float-none mr-3 mb-3">
                </div>

                <div class="col order-first order-md-0">

                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam
                    reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione limaiores sunt nisi. Assumenda,
                    consectetur.Illo suscipit tacilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error
                    iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.bero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
                </div>

            </div>

        </div>

    </div>
</div>

Answer 2

Этот код ведет себя подобно тому из @ZimStem. Используйте только d-flex flex-wrap d-sm-block для классов col-12 div и mr-3 mb-3 float-sm-left float-none order-last about-img для img и используйте тег p для абзаца.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12 d-flex flex-wrap d-sm-block">
            <img src="http://via.placeholder.com/350x150" alt="" class="mr-3 mb-3 float-sm-left float-none order-last about-img">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam
                reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione limaiores sunt nisi. Assumenda,
                consectetur.Illo suscipit tacilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste
                neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.bero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
            </p>
        </div>
    </div>
</div>

Проверьте эту ссылку на CodePen

Answer 3

Вы можете сделать это, добавив custom class с col вот так

@media screen and (max-width: 767px) {
  
    .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
    <div class="row">

        <div class="col-12">
 
            <div class="col flex-container">
              <div class="order-last">
                <img src="http://via.placeholder.com/350x150" alt="" style="" class="float-md-left float-none mr-3 mb-3 about-img">
              </div>
              <div class="order-first">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam
                reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione limaiores sunt nisi. Assumenda,
                consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste
                neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.bero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
            </div>
        </div>
    </div>
</div>

Ваша обновленная скрипка здесь

Answer 4

Классы order-* в Bootstrap 4 используют flexbox, но это не работает, потому что дочерние элементы col не содержатся в row. Более простой вариант - использовать col-12 с d-flex (display:flex) ...

Поскольку упорядочение по гибкости требуется только для работы с меньшей (мобильной) шириной, используйте d-sm-block, чтобы позволить img плавать влево при большей (sm-and-up) ширине. order-first 2-го div активируется на мобильном телефоне.

https://www.codeply.com/go/DNJU8bTtgy

<div class="container">
    <div class="row">
        <div class="col-12 d-flex flex-row flex-wrap d-sm-block">
            <img src="http://via.placeholder.com/350x150" alt="" class="mr-3 mb-3 float-sm-left float-none about-img">
            <div class="order-first">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam
                reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione limaiores sunt nisi. Assumenda,
                consectetur.Illo suscipit tacilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste
                neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.bero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
            </div>
        </div>
    </div>
</div>

Answer 5

Обернуть столбец в строке. как это. если вы хотите реагировать, используйте адаптивный класс [order-sm-last и т. д.].

Рабочая скрипка

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
    <div class="row">

        <div class="col-12">
           <div class="d-sm-flex d-md-block row">
            <div class="col col-sm-12 order-sm-last order-md-0">
                <img src="http://via.placeholder.com/350x150" alt="" style="" class="float-md-left float-none mr-3 mb-3 about-img">
            </div>

            <div class="col col-sm-12 order-sm-first order-md-0">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam
                reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione limaiores sunt nisi. Assumenda,
                consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.Illo suscipit facilis ipsum ullam reiciendis odio error isteneque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.bero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
            </div>
         </div>
        </div>

    </div>
</div>