更改移动网站版本上的对象位置

Question

我正面临解决特定情况的问题。
我需要重新定位图像，或者在移动版本中用另一个对象（div）对其进行更改。我尝试使用元素 order 和复制图像使其完成，将其中一个隐藏在桌面网站版本上并显示在移动版本上，但是应用了 @media only（纯媒体）屏幕上上的> visibility：hidden （隐藏）或 display：none （显示）：。

有人可以帮我吗？ 我想这可能很容易解决，但却无法达到预期目标。

http://homologacao.nossosprojetos.com.br/lineup/这是演示网站。我真的很想维护HTML上的顺序（第2块，左边的文本和右边的图像）。 具体的块如下。

/* Content 2 */

.content-2{padding: 20px 0; background: #dbd3d2;}

.content-2 .box-1 img{max-width: 90%;}

.content-2 .box-1{margin: 60px 0;}

@media only screen and (max-width: 480px) {
    .content-2 .box-1 .first{order: 1;max-width: 70%; align-items: center; margin: 0px 50px;}
    .content-2 .box-1 p{order: 2; left: 50px;}
}

    <section class="content-2">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-17 text-center">
                    <h2>Design de Sobrancelhas</h2>
                    <h3>Destaque seu olhar com um design perfeito</h3>
                </div>
            </div>
            <div class="row box-1">
                <div class="col-12 col-sm-5 offset-sm-1 text-center text-sm-left second">
                    <p class="p">
                        Essa é uma técnica especial para delinear o contorno das sobrancelhas. Ela corrige a simetria das sobrancelhas, oferece um efeito de “face harmoniosa” e deixa o rosto ainda mais bonito e simétrico. 
                        <br><br>
                        A precisão que você sempre sonhou para as suas sobrancelhas, com as profissionais do Line Up.
                        <br><br><br>
                        <a href="#contact" class="btn btn-success">Agende seu Horário</a>
                    </p>
                </div>
                <div class="col-12 col-sm-5 offset-sm-1 text-center text-sm-left  first">
                    <img src="http://homologacao.nossosprojetos.com.br/lineup/assets/img/img-2.png" alt="Img-2" class="img-fluid">
                </div>
            </div>
        </div>
    </section>

非常感谢您。