Создание централизованного блока изображений в контейнере Bootstrap

Question

Я хочу, чтобы группа центрированных изображений была организована определенным образом на домашней странице загрузочного сайта. Для того, чтобы выглядеть как на картинке ниже:

Я хочу, чтобы они оставались в центре, а затем уменьшаться, когда мы идем на мобильный, с «FreeShipping блока» не отображается, так это как раз два горизонтальных блоков ниже 750px.

Я создал Plunker с кодом У меня есть

https://plnkr.co/edit/l6rbmEZQbqGZYifBmF5k?p=preview

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-12 customer-greeting"> 
 
    <p class="intro_text">My opening blurb of text</p> 
 
    <div class="offerscontainer"> 
 
    <div class="offeroftheday"> 
 
     <a href="product_info.php?products_id=221"> 
 
     <img class="img-responsive" src="http://i.imgur.com/TQ6gwoO.jpg"> 
 
     </a> 
 
    </div> 
 
    <div class="freeshipping"> 
 
     <img class="img-responsive" src="http://i.imgur.com/Xqw75nl.jpg"> 
 
    </div> 
 
    <div class="24hrdelivery"> 
 
     <a href="index.php?cPath=53"> 
 
     <img class="img-responsive" src="http://i.imgur.com/F3JTlas.jpg"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Должен ли я добавлять классы с плавающей точкой или все должны они быть самозагрузки col-8-sm, col-4-sm и т.д.?

PS - Если @queries использоваться в местах Bootstrap или они должны в значительной степени всей раскладке быть обработаны в HTML-коде с col-8-sm (классами начальной загрузки) и т.д.

Answer 1

Вы можете сделать это так ..

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-8"> 
     <img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg"> 
     <br> 
     <img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg"> 
     <br> 
    </div> 
    <div class="col-sm-4"> 
     <img class="img-responsive width-100" src="http://i.imgur.com/Xqw75nl.jpg"> 
    </div> 
    </div> 
</div> 

CSS

.width-100 { width: 100%; } 

Вы можете написать col-md- * или col-sm- * в зависимости от ваших требований!