Html 当有空间时，引导柱必须移到一侧

我想用HTML制作一个字典，所以我想为每个字符都有一个div，class:'col-sm-3 col-sm-offset-1'

但是当我有例如A，B，C，D，E，F，G，和B时，包含了很多单词 D、E、F将放置在底部，B的下方

示例代码：

<div class="col-sm-3 col-sm-offset-1">
    <div class="row">
        <span class="dropcap">A</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
</div>

<div class="col-sm-3 col-sm-offset-1">
    <div class="row">
        <span class="dropcap">B</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
</div>

<div class="col-sm-3 col-sm-offset-1">
    <div class="row">
        <span class="dropcap">C</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
</div>

<div class="col-sm-3 col-sm-offset-1">
    <div class="row">
        <span class="dropcap">D</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
</div>

<div class="col-sm-3 col-sm-offset-1">
    <div class="row">
        <span class="dropcap">E</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
</div>

<div class="col-sm-3 col-sm-offset-1">
    <div class="row">
        <span class="dropcap">F</span>
    </div>
    <div class="row">
        <h4>Some word</h4>
        <span>some explanation</span>
    </div>
</div>

我想让它像这样：

---

我现在真的被卡住了。

我已经编辑并重新发布了。试试这个

//更新手机屏幕 功能手机{ $'A'。在$'col1'后面追加； $'B'。在$'col1'后面追加； $'C'。在$'col1'后面追加； $'D'。在$'col1'后面追加； $'E'。在$'col1'后面追加； $'F'。在$'col1'后面追加； } $function{ var w=$window.width； //呼吁移动用户 如果w<768{ 可移动的 } //用于调整浏览器大小 $window.resizefunction{ var rw=$window.width； 如果rw<768{ 可移动的 } 否则{ $'B'。在$'col2'后面追加； $'C'。在$'col3'后面追加； $'E'。在$'col3'后面追加； $'D'。在$'col1'后面追加； $'F'。在$'col1'后面追加； } }; }; h3{ 文本对齐：居中； 颜色：白色； } A. D F B C E

---

你能给我们看一些代码和可能的演示吗。taI已经添加了代码，非常简单，只是bootstrap中的列类。我的生活问题可以在这里找到：@Jason，我已经编辑并发布了正确的解决方案。检查下面。看来引导无法解决此问题。您需要使用jquery。jquery嵌套有一个解决方案：尝试使用它。只使用css，它将是一个真正的魔法，这不是我想要的。当你在一个小屏幕上观看这段视频时，div会在下面依次显示：a，D，F，B，C，E，这就是为什么div需要按字母顺序排列。另外，我不想在添加单词时手动更改这些div的位置。@jason我理解这个问题。我会编辑并发回。@jason，我已经编辑并发回了检查解决方案。我希望你喜欢这个解决方案。没关系，我还是更喜欢看其他div的高度，如果它较短的话，再加上一个字符。但我在看css是否可行，我想不是：