Wie man das Layout organisiert, um es reaktionsfähig zu machen?

Question

dies ist mein Code

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h2 class="page-header"> Utenti online </h2> 
      </div> 
     </div> 
     <!-- fine row1 --> 

     <div class="row"> 
      <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px"> 
       <div class="useronline"> 
        <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"> 
        <b style="margin:10px;"> Marco </b> 
       </div> 
      </div> 

      <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px"> 
       <div class="useronline"> 
        <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"> 
        <b style="margin:10px;"> Marco </b> 
       </div> 
      </div> 
      <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px"> 
       <div class="useronline"> 
        <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"> 
        <b style="margin:10px;"> Marco </b> 
       </div> 
      </div> 
      <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px"> 
       <div class="useronline"> 
        <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"/> 
        <b style="margin:10px;"> Marco </b> 
       </div> 
      </div> 

      <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px"> 
       <div class="useronline"> 
        <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"> 
        <b style="margin:10px;"> Marco </b> 
       </div> 
      </div> 
     </div> 
    </div> 

und das ist das Bild des Browser-Fensters (Großbild)

Nun col-lg 10 ist aber sm ist 25. Meine Frage ist: Wie das Layout so zu organisieren, dass es für alle Bildschirme reaktionsfähig ist?

Answer 1

Bootstrap reagiert auf allen Bildschirmen, wenn Sie für ein konsistentes Verhalten in allen Bildschirmgrößen suchen, können Sie diese Zeilen im Code ändern, wie unten:

ändern diese:

<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px"> 

dazu

<div class="col-sm-2 col-lg-2 col-md-2" style="margin:10px"> 

werden alle Divs in zwei Spalten für alle Geräte zu verbreiten.

Tut mir leid, ich habe nicht genug Punkte, um als Kommentar hinzuzufügen, daher als Antwort hinzufügen.