ブートストラップ5つの要素、異なるデバイス上の異なる配置

Question

私は異なる画面サイズで異なる配置に配置する5つの要素があります。列内の移動各一方次いで1

* * 
* * 
* 

* 
* 
* 
* 
* 

から2 - それは、錠剤2に、第2の

における最初の行の3 2

* * * 
* * 

あろうデスクトップ上

どのようにタブレットを行うことができますか？私は、行の最初の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 -->

を

希望します。