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

希望它有帮助。