Bootstrap 5 Elemente, unterschiedliche Anordnung auf verschiedenen Geräten

Question

Also habe ich 5 Elemente, die ich in verschiedenen Platzierungen auf verschiedenen Bildschirmgrößen platzieren möchte. auf Desktops wird es 3 in der ersten Zeile wird anschließend 2 im zweiten

* * * 
* * 

dann auf Tabletten 2 - 2 - 1

* * 
* * 
* 

dann auf mobiles jedem in einer Reihe

* 
* 
* 
* 
* 

Wie kann ich das Tablet eins? wenn ich die ersten 3 in einer Reihe gelegt wird habe ich folgendes

* * 
* 
* * 

Answer 1

Es ist immer mit mobilen zuerst in Bootstrap starten hilft, so können Sie erreichen, was Sie so wollen:

.row div { 
 
    text-align: center; 
 
} 
 

 
.col1 { 
 
    background-color: red; 
 
} 
 
.col2 { 
 
    background-color: blue; 
 
} 
 
.col3 { 
 
    background-color: green; 
 
} 
 
.col4 { 
 
    background-color: yellow; 
 
} 
 
.col5 { 
 
    background-color: orange; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row"> 
 
    <div class="col1 col-xs-12 col-md-6 col-lg-4">COL1</div> 
 
    <div class="col2 col-xs-12 col-md-6 col-lg-4">COL2</div> 
 
    <div class="col3 col-xs-12 col-md-6 col-lg-4">COL3</div> 
 
    <div class="col4 col-xs-12 col-md-6">COL4</div> 
 
    <div class="col5 col-xs-12 col-lg-6">COL5</div> 
 
</div>

Answer 2

den Code unten benutzen:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4" > 
 
     1st Column 
 
    </div> <!-- col --> 
 

 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     2nd Column 
 
    </div> <!-- col --> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     3rd Column 
 
    </div> <!-- col --> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     4th Column 
 
    </div> <!-- col --> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     5th Column 
 
    </div> <!-- col --> 
 
    
 
    </div> <!-- row --> 
 
    </div> <!-- container -->

Ich hoffe, es hilft.