Наложение изображений магазина приложений с помощью адаптивного сайта bootstrap 3

Question

Я не уверен, что термин «оверлей» здесь правильный.В основном у меня есть 2 столбца с изображениями в них с img-отзывчивым набором, который занимает весь столбец, поэтому при просмотре на небольших устройствах они складываются.В правом столбце я хочу наложить иконки Apple и Google Store в определенной позиции.Однако, когда я изменяю размер окна, чтобы проверить, как оно будет выглядеть на экранах разных размеров, изображения в магазине приложений не останутся относительными по положению или размеру.Я не лучший в CSS, поэтому я уверен, что что-то упустил, но в идеале вы бы хотели, чтобы эти изображения в магазине приложений располагались точно так же и изменяли размеры, чтобы все оставалось относительным и выглядело одинаково.

<div class="container">
    <!-- SAID BY SIDE IMAGES -->
    <div class="row">
        <div class="col-md-6 col-xs-12  col-sm-6" style="background-color: green; padding: 0;">
            <img class="img-responsive" style="width:100%; height:auto;" src="~/Content/Images/Middle_1.jpg" alt="">
        </div>
        <div class="col-md-6 col-xs-12 col-sm-6" style="background-color: blue; padding: 0; position: relative;">
            <img class="img-responsive" style="width:100%; height:auto;" src="~/Content/Images/Middle_2.jpg" alt="">

        <!-- THIS IMAGE NEEDS TO LOOK THE SAME IN POSITION AND RESIZE ITSELF BASED ON THE SCREEN WIDTH SO IT LOOKS THE SAME ON ANY WIDTH -->
            <img style="position: absolute; width: 120px; height: 40px; top: 300px; left: 10px;" src="~/Content/Images/Apple_App_Store_badge.jpg" />
        </div>
</div>