Bootstrap 5個元素，在不同設備上的不同配置

Question

所以我有5個元素，我想在不同的屏幕尺寸上放置不同的位置。 臺式機上的這將是3的第一行中，然後在第二

* * * 
* * 

然後在片劑二月2日至2日 - 1

* * 
* * 
* 

然後在移動設備上每一個在一排

* 
* 
* 
* 
* 

我該如何做平板電腦？如果我連續放第3，我將有以下

* * 
* 
* * 

Answer 1

它總是幫助，開始與移動首先在引導，這樣你就可以達到你想要的東西是這樣的：

.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

使用下面的代碼：

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

希望它有幫助。