图片在文本之后但在文本上方的移动视图中

Question

会不会是下框里图片在右边，文字在左边，但是在手机上图片在文字上面？

我知道如果我要在我的 HTML 代码中的文本 (p) 之后创建图像 (img)，图像会在右侧，但在移动视图中文本在图片。

HTML:

 <div class="box-mission">
        <div class="flex-row middle-sm">
            <div class="flex-col-sm-5 flex-col-xs-12">
                <img src="https://pickaface.net/gallery/avatar/unr_test_161024_0535_9lih90.png">
            </div>
            <div class="flex-col-sm-7 flex-col-xs-12">
                <h3>Lorem ipsum dolor</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>

    <div class="box-mission">
        <div class="flex-row middle-sm">
            <figure class="flex-col-sm-5 flex-col-xs-12">
                <img src="https://pickaface.net/gallery/avatar/unr_test_180711_1752_p1n69px.png">
            </figure>
            <div class="flex-col-sm-7 flex-col-xs-12">
                <h3>consetetur sadipscing elitr,</h3>
                <p>aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
                    kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                    consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, sed diam voluptua.</p>
            </div>
        </div>
    </div>

CSS:

.box-mission {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 60px;
    padding: 10px 10px 0 10px;
    box-shadow: 0px 2px 6px -3px #32435f;
}

我使用： bootstrap: 3.4.1, laravel: 6.0

有人知道怎么做吗？

Answer 1

如果你使用 bootstrap 3.4.1，你最常使用像这样的断点推送和拉取： bootstrap 3 document

<div class="row">
    <div class="col-xs-9 col-md-push-3" style="background:red; height:100px"></div> 
    <div class="col-xs-3 col-md-pull-9" style="background:blue; height:100px"></div>
</div>

codepen

图片在文本之后但在文本上方的移动视图中

Picture after the text but in the mobile view above the text

html

css

sass