操縱上自舉列和行的

Question

我有兩行和三列這樣

[1] [2] [3]

[4] [5] [6]

我想他們看起來像這樣當我改變到移動視圖

[1] [2]

[3] [4]

[5] [6]

我已經嘗試過，但是當我更改爲移動視圖，它們會是這樣

[ 1] [2]

[3]

[4] [5]

[6]

如何操縱行和列？ 謝謝。

Answer 1

也許你正在使用兩行，這就是爲什麼你會得到這個結果。將它們全部放入一行並添加clearfixes特殊尺寸。

<!-- columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
<div class="row"> 
    <div class="col-xs-6 col-md-4">1</div> 
    <div class="col-xs-6 col-md-4">2</div> 

    <div class="clearfix visible-xs-block"></div> <!-- It works on mobile view --> 

    <div class="col-xs-6 col-md-4">3</div> 

    <div class="clearfix visible-md-block"></div> <!-- It works on desktop view --> 

    <div class="col-xs-6 col-md-4">4</div> 

    <div class="clearfix visible-xs-block"></div> <!-- It works on mobile view --> 

    <div class="col-xs-6 col-md-4">5</div> 
    <div class="col-xs-6 col-md-4">6</div> 
</div> 

現在，你將有：

[1] [2] [3]

[4] [5] [6]

桌面視圖和

[1] [2]

[3] [4]

[5] [6]

移動視圖。