How to position two images for mobile devices and different media queries

Question

I have this site:

www.kenyonglover.net

The code for the images are on the front.

<div class="row centerdiv style_featured">
    <div class="col-md-7 col-xs-7 col-ms-7">
        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-black-code" target="_blank"><img class="bottlefragranceshomeright img-responsive grayscale" src="images/fragrance/received_350849349195382_resized.jpeg" alt="" title="Click to purchase Kenyon Glover's Black Code Fragrance for Men"></a>
     </div>
     <div class="col-md-5 col-xs-7 col-ms-7">
        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-endless-love-for-women" target="_blank"><img class="bottlefragranceshomeleft img-responsive grayscale" src="images/fragrance/received_736852273421347_resized.jpeg" alt=""  title="Click to purchase Kenyon Glover's Endless Love Fragrance for Women"></a>
    </div>
</div>

The site is fine in a large screen but, when it's reduced to mobile, the images disappear.

CSS:

.bottlefragrances {
    width: 250px;
    height: auto;
}
.bottlefragranceshomeleft {
    margin-left: 125px !important;
    width: 150px !important;
    float: left !important;
}
.bottlefragranceshomeright {
    margin-left: 100px !important;
    width: 150px !important;
    float: right !important;
}

/* Grayscale rollover */
.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}
.centerdiv {
    margin-left: auto !important;
    margin-right: auto !important;
}

My goal is to make the images smaller and stack as the screen viewport changes.

I need a set of media queries to make this work on this template I've modified.

UPDATE:

So I implemented the suggested solution, but got this...

The images are not tall. I removed the img-responsive from the class on the image thinking that would be it.

UPDATE II:

I GOT IT!

This is the solution based of the solution I voted for.

Added another MEDIA QUERY below the first

@media (min-width: 320px) and (max-width: 767px) {
    .introduction{
        float: none;
        position: relative;
        background-image: url('http://www.kenyonglover.net/images/fragrance/DSC_0134-Hi%20Res_resized.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 20px;
    }
    .introduction > img{
        display: none
    }
    .bottlefragranceshomeright, .bottlefragranceshomeleft {
        margin: auto !important;
        width: 150px !important;
        float: none !important;
        position: relative !important;
        height: 145px !important;
    }
    .intro-content h1{
        font-size: 28px;
    }
    .intro-content h2{
        font-size: 17px
    }
}
@media (min-width: 768px)and(max-width: 1440px) {
    .introduction{
        float: none;
        position: relative;
        background-image: url('http://www.kenyonglover.net/images/fragrance/DSC_0134-Hi%20Res_resized.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 20px;
    }
    .introduction > img{
        display: none
    }
    .bottlefragranceshomeright, .bottlefragranceshomeleft {
        margin: auto !important;
        width: 150px !important;
        float: none !important;
        position: relative !important;
        height: auto !important;
    }
    .intro-content h1{
        font-size: 28px;
    }
    .intro-content h2{
        font-size: 17px
    }
}

and adjusted the CSS for the images like so:

.bottlefragrances {
    width: 250px;
    height: auto;
}
.bottlefragranceshomeleft {
    margin-left: 175px;
    width: 150px !important;
    float: left !important;
}
.bottlefragranceshomeright {
    margin-left: 145px;
    width: 150px !important;
    float: right !important;
}

FINALLY, the HTML is like so...

                <div class="row centerdiv style_featured">
                    <div class="col-md-6 col-xs-6 col-ms-7">
                        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-black-code" target="_blank"><img class="bottlefragranceshomeright grayscale" src="images/fragrance/received_350849349195382_resized.jpeg" alt="" title="Click to purchase Kenyon Glover's Black Code Fragrance for Men"></a>
                    </div>
                    <div class="col-md-6 col-xs-6 col-ms-7">
                        <a href="https://bostonperfumery.com/shop?olsPage=products%2Fk-glovers-endless-love-for-women" target="_blank"><img class="bottlefragranceshomeleft grayscale" src="images/fragrance/received_736852273421347_resized.jpeg" alt=""  title="Click to purchase Kenyon Glover's Endless Love Fragrance for Women"></a>
                    </div>
                </div>

Answer 1

Add this code at the end of the responsive.css to get a similar result like image

@media (min-width: 320px) and (max-width: 767px) {
    .introduction{
        float: none;
        position: relative;
        background-image: url('http://www.kenyonglover.net/images/fragrance/DSC_0134-Hi%20Res_resized.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 20px;
    }
  .introduction > img{
        display: none
    }
    .bottlefragranceshomeright, .bottlefragranceshomeleft{
      margin: auto !important;
      width: auto !important;
      float: none !important;
      position: relative !important;
      height: 60px !important;
    }
    .intro-content h1{
      font-size: 28px;
    }
    .intro-content h2{
      font-size: 17px
    }
}

Change img container class from:

<div class="col-md-7 col-xs-7 col-ms-7">

to

<div class="col-md-7 col-xs-6 col-ms-7">

Results