jQuery + Bootstrap Grid - Показать изображения на основе размера экрана

Question

У меня есть веб-проект, и я использую систему сетки бутстрапа. В моей текущей настройке я отображаю 3 изображения, используя col-xs-4, так что 3 изображения отображаются на любом размере экрана в строке. Однако я хочу, чтобы теперь отображалось только 1 изображение, когда размер экрана становится меньше. Это мой исходный код:

<div class="row"> 
    <div class="col-xs-4"> 
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
</div> 

Желаемая выход:
Desktop Вид:

Mobile View:

Я знаю, что я могу просто установить display to none, когда размер экрана падает ниже уровня но я хочу, чтобы веб-приложение загрузило только 1 изображение, чтобы сделать его быстрее (только с помощью display:none; по-прежнему будут загружать другие 2 изображения)

Любое предложение, как это сделать?
Моя идея - использовать jquery/javascript для генерации html-страниц. Вот jsfiddle поиграться: https://jsfiddle.net/Lb92rv84/1/

Answer 1

Я использовал элементы html из вопроса.

$(document).ready(function(){ 
 
    var width = $(window).width(); 
 
    var newdiv1 = $('<div class="col-xs-4"></div>'); 
 
    var image = '<img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">'; 
 
    var el = newdiv1.append(image); 
 
    
 
    if (width >= 768){ 
 
    \t //html for screen wider than 768 
 
    \t el.appendTo('.target').clone().appendTo('.target').clone().appendTo('.target'); 
 
    }else{ 
 
    \t //html for screen smaller than 768 
 
    \t el.appendTo('.target'); 
 
    } 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="target"></div> 
 
    </div> 
 
</div>

Answer 2

Попробуйте назначить пользовательские классы для каждого DIV изображения вы хотите скрыть:

<div class="row"> 
    <div class="col-xs-4 image-1"> 
    <I'm src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
    <div class="col-xs-4 image-1"> 
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
</div> 

Тогда в точке останова:

.image-1 img{ 
    display:none; 
} 

Таким образом, вы можете по-прежнему используйте свой div для другого содержимого и только скрывайте изображения.