ブートストラップグリッド - 3列と2行2列および3列

Question

にこんにちは、典型的なブートストラップグリッドより大きいまたは媒体画面

<div class="row"> 
<div class="col-sm-4" align="center" style="font-size:150px">A</div> 
<div class="col-sm-4" align="center" style="font-size:150px">B</div> 
<div class="col-sm-4" align="center" style="font-size:150px">C</div> 
</div> 
<div class="row"> 
<div class="col-sm-4" align="center" style="font-size:150px">D</div> 
<div class="col-sm-4" align="center" style="font-size:150px">E</div> 
<div class="col-sm-4" align="center" style="font-size:150px">F</div> 
</div> 

を有することは非常に小さな画面で

A B C 
D E F 

を示しますそれは示します

A 
B 
C 
D 
E 
F 

今私の質問。これは最後の行として最後の列を示すために非常に小さい画面で作ることが可能ですか

あなたのために助けてください。

Answer 1

余分な小さな画面のために必要な順序で別のグリッドを作成し、ブートストラップの応答ユーティリティを使用して2つのグリッドを表示/非表示にします。例えば

：重くフレキシボックスをサポートするために、ブートストラップ3Sグリッド構造を変更することなく

<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 hidden-xs"> 
 
    <div class="col-sm-4" align="center" style="font-size:150px">A</div> 
 
    <div class="col-sm-4" align="center" style="font-size:150px">B</div> 
 
    <div class="col-sm-4" align="center" style="font-size:150px">C</div> 
 
    <div class="col-sm-4" align="center" style="font-size:150px">D</div> 
 
    <div class="col-sm-4" align="center" style="font-size:150px">E</div> 
 
    <div class="col-sm-4" align="center" style="font-size:150px">F</div> 
 
    </div> 
 
    <div class="row visible-xs-block"> 
 
    <div class="col-xs-6" align="center" style="font-size:150px">A</div> 
 
    <div class="col-xs-6" align="center" style="font-size:150px">B</div> 
 
    <div class="col-xs-6" align="center" style="font-size:150px">D</div> 
 
    <div class="col-xs-6" align="center" style="font-size:150px">E</div> 
 
    <div class="col-xs-6" align="center" style="font-size:150px">C</div> 
 
    <div class="col-xs-6" align="center" style="font-size:150px">F</div> 
 
    </div> 
 
</div>