图片在文字之后，但在文字上方的移动视图中答案

【问题标题】：Picture after the text but in the mobile view above the text图片在文字之后，但在文字上方的移动视图中
【发布时间】：2021-11-08 17:13:13
【问题描述】：

有没有可能是图片在右下角文字在左下框，而手机本身图片在文字上方？

我知道如果我要在我的 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;
}

我使用：引导程序：3.4.1，拉拉维尔：6.0

有人知道怎么做吗？

【问题讨论】：

我认为你需要使用媒体查询。

标签： html css sass

【解决方案1】：

如果您使用 bootstrap 3.4.1，您最常在断点上使用 push 和 pull，如下所示： 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

【讨论】：