Bootstrap网格排序响应

Question

嘿，我被困住了，我正在找一个有自助经验的人。

这是我目前的情况：

这就是相应的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig yellow" />
      <h3 class="yellow">1</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig lightgreen" />
      <h3 class="lightgreen">3</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig blue" />
      <h3 class="blue">5</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig orange" />
      <h3 class="orange">2</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig green" />
      <h3 class="green">4</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12">
      <hr class="hrBig brown" />
      <h3 class="brown">6</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
  </div>
</div>

我的问题是在平板电脑模式下，标签应如下所示：

12
34
56

但是现在他们就是这样：

在移动设备上，他们看起来应该是这样的：

1
2
3
4
5
6

我怎样才能做到这一点？

Answer 1

我需要重新安排你的代码并添加一些包装来实现你想要的东西

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig yellow" />
          <h3 class="yellow">1</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig orange" />
          <h3 class="orange">2</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig yellow" />
          <h3 class="yellow">3</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig orange" />
          <h3 class="orange">4</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig yellow" />
          <h3 class="yellow">5</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="col-md-12 col-sm-6 col-12">
          <hr class="hrBig orange" />
          <h3 class="orange">6</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以像Bootstrap 3.3.7一样使用

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

<div class="col-sm-4 col-xs-12">
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig yellow" />
      <h3 class="yellow">1</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig orange" />
      <h3 class="orange">2</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
</div>


<div class="col-sm-4 col-xs-12">
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig lightgreen" />
      <h3 class="lightgreen">3</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>

    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig green" />
      <h3 class="green">4</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
    </div>
</div>


<div class="col-sm-4 col-xs-12">
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig blue" />
      <h3 class="blue">5</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
    <div class="col-sm-12 col-xs-6">
      <hr class="hrBig brown" />
      <h3 class="brown">6</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
    </div>
</div>

</div>