jQuery + Bootstrap Grid - Zeige Bilder basierend auf der Bildschirmgröße

Question

Ich habe ein Webprojekt und ich benutze Bootstrap's Grid-System. In meiner aktuellen Einrichtung zeige ich 3 Bilder unter Verwendung col-xs-4 an, so dass 3 Bilder auf jeder Bildschirmgröße pro Zeile angezeigt werden. Allerdings möchte ich jetzt nur 1 Bild anzeigen, wenn die Bildschirmgröße kleiner wird. Das ist mein Original-Code:

<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> 

Wunsch Ausgang:
Desktop-Ansicht:

Mobile Ansicht:

Ich bin mir bewusst, dass ich einfach einstellen die display to none, wenn die Bildschirmgröße unter eine CEE fällt Ich möchte, dass die Webanwendung nur 1 Bild lädt, um es schneller zu machen (nur display:none; lädt immer noch die anderen 2 Bilder)

Irgendwelche Vorschläge, wie man das macht?
Meine Idee ist es, jquery/javascript zu verwenden, um HTML-Seiten zu generieren. Hier ist die jsfiddle um zu spielen: https://jsfiddle.net/Lb92rv84/1/

Answer 1

Ich habe die HTML-Elemente aus der Frage.

$(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

Versuchen benutzerdefinierte Klassen zu jedem Bild DIV zuweisen Sie ausblenden möchten:

<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> 

Dann in Ihrem Breakpoint:

.image-1 img{ 
    display:none; 
} 

Auf diese Weise können Sie verwende dein div immer noch für andere Inhalte und verstecke nur Bilder.