Question

我们说我有4列这样的

A   D   G   J
B   E   H   K
C   F   I   L

我无法理解让它像这样流动所需的标记：

A   G
B   H
C   I
D   J
E   K
F   L

而不是

A   D
B   E
C   F
G   J
H   K
I   L

非常感谢有关此问题的任何信息！

Answer 1

你应该可以这样做：

<div class="col-xs-6 col-md-3">A<br>B<br>C</div>
<div class="col-xs-6 col-md-3 col-md-push-3">G<br>H<br>I</div>
<div class="col-xs-6 col-md-3 col-md-pull-3">D<br>E<br>F</div>
<div class="col-xs-6 col-md-3">J<br>K<br>L</div>

我发现从最小尺寸开始设计首先让这很容易。

<强> bootply example

Answer 2

你可以尝试这样的事情。注意 - 这是2列，小于768px，4是768px及以上。

Demo here

<div class="row">
    <div class="col-xs-6">
        <div class="col-xs-12 col-sm-6">
            <div>A</div>
            <div>B</div>
            <div>C</div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div>D</div>
            <div>E</div>
            <div>F</div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="col-xs-12 col-sm-6">
            <div>G</div>
            <div>H</div>
            <div>I</div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div>J</div>
            <div>K</div>
            <div>L</div>
        </div>
    </div>
</div>

Answer 3

假设你正在使用bootstrap 3.我已经通过嵌套列实现了我认为你想要的效果：

<div class="col-sm-6">
 <div class="col-md-6">A <br/> B <br/> C</div>
 <div class="col-md-6">D <br/> E <br/> F</div>
</div>
<div class="col-sm-6"> 
  <div class="col-md-6">G <br/> H <br/> I</div>
  <div class="col-md-3">J <br/> K <br/> L</div>
</div>

Demo

Bootstrap响应列基于字母内容排序

3 个答案: