Question

我正在将图像包裹在可以工作的图像周围，但是当我缩放到移动宽度时，图像应该在文本之后排序并且跟在文本之后，而不是之前。

当我删除它时它正在工作但当然文本不再环绕图像。

这是一个小提琴：

代码：

<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

Bootstrap 4中的order-*类使用flexbox，但这不起作用，因为col中没有包含子row div。更简单的选择是将col-12与d-flex（display:flex）... {/ p>一起使用

由于您只需要灵活排序来处理较小（移动）宽度，因此请使用d-sm-block以允许img在较大（sm-and-up）宽度上向左浮动。第二个order-first 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 2

将行包裹在行中。像这样。如果你想要响应，那么使用响应类[order-sm-last等]。

工作fiddle

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

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>

您的更新小提琴here

Answer 4

此代码的行为类似于@ZimStem。仅对d-flex flex-wrap d-sm-block div和col-12类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 5

非常感谢。图像应该是响应的，所以我来到这个解决方案。

小提琴：

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>

Bootstrap 4包装和订购问题

5 个答案: