为移动设备按列排序 Bootstrap 网格

Question

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

 |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>

此致

Answer 1

应该可以（只要他们的身高都一样）

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

Answer 2

您可以使用 Bootstrap 布局中的列从 Bootstrap layout columns

中检查它

所以你可以让一行三列，每一列有两行。

 <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”以根据需要控制每个屏幕尺寸下每列的大小。

为移动设备按列排序 Bootstrap 网格

Order Bootstrap Grid by column for mobile devices

html

css

grid

bootstrap-4