Question

这可能是非常简单的事情，但我已经大大过分复杂了，现在我看不到树木了！

使用Bootstrap我有以下内容：

      col 1    col 2    col 3    col 4    col 5
row 1   1        2        3        4        5
row 2   a        b        c        d        e
row 3   z        y        x        w        v

在手机中查看它看起来像：

1
2
3
4
5
a
b
c
etc

这通常很好，但是，我想这样做：

1
a
z
2
b
y
3
c
x
etc

对于我的生活，我无法得到它。我有一种相对容易的感觉，但我一直在看它太久了，现在只是讨厌！

Answer 1

相应地更改媒体查询，例如移动版run code snippet

@media (max-width: 2500px) {
  .table {
      width:100%;
  }
  
  .table thead {
    display: none;
  }
  
  .table tr {
    display: block;
    width: 100%;
    margin-bottom: 50px;
  }
  .table td {
    display: block;
    width: 100%;
  }
}

对于这个例子，我必须给它一个大的断点（2500px），这样你就可以注意到在运行<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container" style=""> <div class="row"> <div class="col-xs-12"> <table class="table table-responsive"> <thead> <tr> <th>col 1</th> <th>col 2</th> <th>col 3</th> <th>col 4</th> <th>col 5</th> <th>col 6</th> </tr> </thead> <tbody> <tr> <td>col 1 data 1</td> <td>col 1 data 2</td> <td>col 1 data 3</td> <td>col 1 data 4</td> <td>col 1 data 5</td> <td>col 1 data 6</td> </tr> <tr> <td>col 2 data 1</td> <td>col 2 data 2</td> <td>col 2 data 3</td> <td>col 2 data 4</td> <td>col 2 data 5</td> <td>col 2 data 6</td> </tr> <tr> <td>col 3 data 1</td> <td>col 3 data 2</td> <td>col 3 data 3</td> <td>col 3 data 4</td> <td>col 3 data 5</td> <td>col 3 data 6</td> </tr> </tbody> </table> </div> </div> </div>时有所不同。

不幸的是它不能用于表头，所以我们隐藏它。

检查工作示例：

var third = dateTimes.Distinct().OrderByDescending(d => d).Skip(2).FirstOrDefault();

DateTime

Answer 2

Arrrg！做到了！有兴趣的人：

<div class="row">
    <div class="col-md-4">
        <div class="col-md-12">row 1 col 1</div>
        <div class="col-md-12">row 2 col 1</div>
        <div class="col-md-12">row 3 col 1</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">row 1 col 2</div>
        <div class="col-md-12">row 2 col 2</div>
        <div class="col-md-12">row 3 col 2</div>
    </div>
    <div class="col-md-4">
        <div class="col-md-12">row 1 col 3</div>
        <div class="col-md-12">row 2 col 3</div>
        <div class="col-md-12">row 3 col 3</div>
    </div>
</div>

随后，在移动设备上，您将获得：

row 1 col 1
row 2 col 1
row 3 col 1
row 1 col 2
row 2 col 2
row 3 col 3

等

响应引导按列不行

2 个答案: