CSS：在较小屏幕上的按钮后面将img右移

Question

我有一个标题，该标题使用引导程序分为两列：col-md-6。

在右列中，有一个图像，我需要将该图像放置在较小屏幕的左列中的按钮后面。

我认为我可以使用media queries和z-index propierty来实现这一目标。所以我采取了两种方法：

a）为图像的容器div赋予z-index -1，这会将图像放置在所有内容的后面，甚至是行的背景。

b）赋予按钮positive z-index，使其停留在图像上方，但是image始终位于buttons上方。

我该如何实现？

.my_header_bg_color {

    /*background-color: #4FB99F;*/
    /*background-color: #00ADB5;*/
    /*background-color: #6BB983;*/
    background-color: #00AD80;

}


@media (min-width: 200px) {
    /* smartphones, iPhone, portrait 480x320 phones */
    .btn, h2, p { margin-bottom: 15px; }

    .my_home_banner_title {
        color: white;
        font-size: 35px;
        font-weight: bold;
    }

    .my_home_banner_image {

         bottom: 0;
         position: absolute;
         right: -0px;
         bottom: 0;
         z-index: -1;
     }

}


@media (min-width: 320px) {
    /* smartphones, iPhone, portrait 480x320 phones */
    .btn, h2, p { margin-bottom: 10px; }

    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

     .my_home_banner_image {

         bottom: 0;
         position: absolute;
         right: -0px;
         bottom: 0;
         z-index: -1;
     }

}


@media (min-width: 481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }


     .my_home_banner_image {

         bottom: 0;
        position: absolute;
        right: -0px;
        bottom: 0;
         z-index: 0;
    }


    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }

    .my_home_banner_left {
        z-index: 100;
    }

}


@media (min-width: 641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .my_home_banner {
        bottom: 0;
    }

    .btn, h2, p { margin-bottom: 10px; }


}


@media (min-width: 961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .my_home_banner {
        bottom: 0;
    }

    .btn, h2, p { margin-bottom: 50px; }

}


@media (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */
    .my_home_banner {
        bottom: 0;
    }

    .btn, h2, p { margin-bottom: 10px; }


}


@media (min-width: 1281px) {
    /* hi-res laptops and desktops */
    .my_home_banner {
        bottom: 0;
    }

    .btn, h2, p { margin-bottom: 10px; }


}

 <div class="container-fluid my_home_banner my_header_bg_color">
        <div class="row">
            <div class="col-md-6 my_home_banner-left">
                <br>
                <br>
                <div class="my_home_banner_left">
                    <p class="my_home_banner_title">Stickers Personalizados</p>
                    <p class="my_home_banner_subtitle">Easy online ordering, 4 day turnaround and free online proofs. Free
                        shipping.</p>
                    <div class="row ">
                        <div class="col-md-6">
                            <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
                        </div>
                        <br>
                        <div class="col-md-6">
                            <a href="{% url 'shop:SamplePackPage' %}"
                               class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
                        </div>
                    </div>
                </div>
                <br>
                <br>
            </div>
            <div class="col-md-6">
                <img class="my_home_banner_image" src="{% static 'img/banner-home.png' %}"
                     width="380px" height="240px">
            </div>
        </div>
    </div>

Answer 1

这不是最好的方法，但是它将帮助您完成所需的工作。 您可以有两个图像：-

1。左列按钮的后面

2。在右列

在大屏幕上使图像＃1不可见，在小屏幕上使图像＃2不可见

Answer 2

在@media (min-width: 320px)部分

.my_home_banner_image {

     bottom: 0;
     position: absolute;
     right: 0px;
     bottom: 0;
     z-index: 0;
     width: 140px;
     height: auto;
 }

并为按钮容器设置z-index。

 .my_home_banner_left .row{ position: relative;
    z-index: 1;
}

doc