在移动视图站点上更改/移动容器位置-解网

问：

我想在移动视图中制作 img 在文本旁边

在桌面视图中，它像这个桌面视图一样去找我

这是我在 HTML 端对本节的代码段

<div class="col-md-6 left-50">
                            <div class="fes2-main-text-cont">
                                <div class="title-fs-45">
                                    PT. Balga Bersaudara Manunggal<br>
                                </div>
                                <div class="line-3-100"></div>
                                <div class="fes2-text-cont">
                                    Global Rent<br>
                                    Mining Support
                                </div>
                                <div class="mt-30">
                                    <a class="button medium thin hover-dark" href="pt_balga/pt-balga.html">More Info</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 right-50 wow fadeInLeft">

                            <div class="ads-img-cont hide-0-800">
                                <img src="balgas/1x/Asset_1.png" alt="img">
                            </div>

                        </div>

现在我隐藏了 img，因为它在移动设备中的破坏，您可以在图像的类中看到，如果我想让它像我想要的那样，我该怎么办？hide-0-800

我一直在互联网上尝试一些代码，在这里尝试一些代码 stackoverflow order 解决方案，但它不能解决我的问题，我希望 img 可以并排显示，而不是在文本容器之前或之后

HTML CSS 响应式设计移动网站

@media (max-width: 800px) {
    .row {
        position: relative;
    }

    .col-md-6 {
        width: 100%;
    }

    .fes2-main-text-cont {
        padding-left: 30%; /* Here make distanc */
    }

    .ads-img-cont {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
    }
}

<div class="row">
    <div class="col-md-6">
        <div class="fes2-main-text-cont">
            <div class="title-fs-45">PT. Balga Bersaudara Manunggal<br></div>
            <div class="line-3-100"></div>
            <div class="fes2-text-cont">Global Rent<br>Mining Support</div>
            <div class="mt-30">
                <a class="button medium thin hover-dark" href="pt_balga/pt-balga.html">More Info</a>
            </div>
        </div>
    </div>
    <div class="col-md-6 ads-img-cont hide-0-800">
        <img src="balgas/1x/Asset_1.png" alt="img">
    </div>
</div>

上一个：背景图像缩放。相应地改变尺寸

下一个：在 css 中按屏幕大小比例设置元素大小

在移动视图站点上更改/移动容器位置

Change/Move Container Position On Mobile View Site

评论