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

Mar*_*nde 6 html css layout twitter-bootstrap

假设我有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

任何有关此问题的信息将不胜感激!

Tri*_*y12 1

你可以尝试这样的事情。注意 - 这是 2 列(小于 768 像素)和 4 列(768 像素及以上)。

演示在这里

<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>
Run Code Online (Sandbox Code Playgroud)