html - 为移动设备按列订购 Bootstrap Grid

Question

我有一个 2 行 3 列的引导网格。它在桌面上看起来像这样：

 |A|B|C|
 |D|E|F|

如果我切换到移动它看起来像：

|A|
|B|
|C|
|D|
|E|
|F|

但我希望它看起来像这样：

|A|
|D|
|B|
|E|
|C|
|F|

所以它应该首先列出第 1 列的所有项目，然后是第 2 列，依此类推。

有没有什么技巧可以让我的网格表现得像我想要的那样？

 <div class="container">
          <div class = "d-flex row">
              <div class="text-muted col-sm-2">A</div>
              <div class="text-muted col-sm-2">B</div>
              <div class="text-muted col-sm">C</div>

            </div>
            <div class = "d-flex row">
              <div class="article-content col-sm-2">D</div>
              <div class="article-content col-sm-2">E</div>
              <div class="article-content col-sm">F</div>
            
          
      </div>

此致

标签： htmlcssbootstrap-4grid

Answer 1

您可以使用 Bootstrap 布局中的 Columns 从Bootstrap 布局列中检查它

因此，您可以将一行设为三列，每列有 2 行。

 <div class="container">

          <div class = "d-flex row">

            <div class="col-sm-4">   
               <div class="text-muted col-sm-2">A</div>
               <div class="article-content col-sm-2">D</div>
            </div>
            
            <div class="col-sm-4">   
              <div class="text-muted col-sm-2">B</div>
              <div class="article-content col-sm-2">E</div>
            </div>
            
            <div class="col-sm-4">   
              <div class="text-muted col-sm-2">C</div>
              <div class="article-content col-sm-2">F</div>
            </div>

         </div>   
    </div>

所以它将是一排有 3 列的大行，就像这张图片一样

在移动布局中，Bootstrap 网格系统将保留一大行，但会将 3 列放在彼此下方以适应屏幕大小，如下所示

您仍然可以控制“col-sm-2”以根据需要控制每个屏幕尺寸下每列的大小。