Question

我正在尝试使这些项目在移动设备上堆叠时保持在正确的标题下，而不是将两个标题行堆叠在彼此的顶部，然后将这两个项目下的所有项目合理吗？我尝试了行/嵌套和表而不是行的几种组合，但是似乎找不到正确的组合以使其看起来像现在在桌面上，然后在移动设备上的正确标题下堆叠正确的项。这是可能的还是我正在尝试做一些超出简单性意味着什么的事情？

<div class="container">      
    <div class="row">
<div class="col-sm-6" style="background-color:yellow;">
  Gold Level
</div>
<div class="col-sm-6" style="background-color:yellow;">
  Silver Level
</div>
</div>
<div class="row">
<div class="col-sm-6">
  Gold benefit 1
</div>
<div class="col-sm-6">
  Silver benefit 1
</div>
</div>
<div class="row">
<div class="col-sm-6">
  Gold benefit 2
</div>
<div class="col-sm-6">
  Silver benefit 2
</div>
</div>
<div class="row">
<div class="col-sm-6">
  Gold benefit 3
</div>
<div class="col-sm-6">
  Silver benefit 3
</div>
</div>
</div>

Answer 1

您可以通过几种不同的方法来执行此操作。最简单的方法是将所有col-放在一个.row中，并使用排序类...

<div class="container">
    <div class="row">
        <div class="col-sm-6 order-first" style="background-color:yellow;">
            Gold Level
        </div>
        <div class="col-sm-6" style="background-color:yellow;">
            Silver Level
        </div>

        <div class="col-sm-6 order-first order-sm-0">
            Gold benefit 1
        </div>
        <div class="col-sm-6">
            Silver benefit 1
        </div>

        <div class="col-sm-6 order-first order-sm-0">
            Gold benefit 2
        </div>
        <div class="col-sm-6">
            Silver benefit 2
        </div>

        <div class="col-sm-6 order-first order-sm-0">
            Gold benefit 3
        </div>
        <div class="col-sm-6">
            Silver benefit 3
        </div>
    </div>
</div>

https://www.codeply.com/go/xfoOBsoVF0

如何在移动设备的每个标头下方有一个引导程序“标头行”，该标头下叠有正确的项目

1 个答案: