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

Question

我想在移动视图中使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订单解决方案并且它不能解决我的问题，我希望img可以并排显示而不是在文本容器之前或之后

Answer 1

试试这个：

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