Question

我需要按照特定顺序对这些列进行重新排序，以使屏幕小于引导程序中的列。我尝试了这个答案Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3，它只适用于3列，但不适用于列需要在移动视图中堆叠的特定方式。这种方式有效，但隐藏和取消隐藏列感觉很脏。有没有更简洁的方法来实现这一目标？

桌面视图在这里

移动版在这里查看

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-12 visible-md visible-lg">
      <div class="col-md-4"><div class="well">1</div></div>
      <div class="col-md-4"><div class="well">2</div></div>
      <div class="col-md-4"><div class="well">ad1</div></div>
      <div class="col-md-4"><div class="well">3</div></div>
      <div class="col-md-4"><div class="well">4</div></div>
      <div class="col-md-4"><div class="well">ad2</div></div>
      <div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div>
    </div>
    <!--col-md-12 visible-md visible-lg -->

    <div class="col-xs-12 visible-xs visible-sm">
        <div class="col-xs-12"><div class="well">ad1</div></div>
        <div class="col-xs-12"><div class="well">1</div></div>
        <div class="col-xs-12"><div class="well">ad2</div></div>
        <div class="col-xs-12"><div class="well">2</div></div>
        <div class="col-xs-12"><div class="well">3</div></div>
        <div class="col-xs-12"><div class="well">ad3</div></div>
        <div class="col-xs-12"><div class="well">4</div></div>
    </div>
    <!-- col-xs-12 visible-xs visible-sm -->

  </div>
  <!-- row -->
</div>
<!-- container -->
</body>
</html>

Codepen here

Answer 1

请检查：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row hidden-xs hidden-sm">
    <div class="col-md-8"><div class="well">728x90 Ad</div></div>
  </div>

  <div class="row">
    <div class="col-md-8"><div class="well">Title</div></div>
    <div class="col-md-4"><div class="well">ad1</div></div>
  </div>

  <div class="row">
    <div class="col-md-4"><div class="well">1</div></div>
    <div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div>
    <div class="col-md-4 col-md-pull-4"><div class="well">2</div></div>
  </div>

  <div class="row">
    <div class="col-md-4"><div class="well">3</div></div>
    <div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div>
    <div class="col-md-4 col-md-pull-4"><div class="well">4</div></div>
  </div>

</div> <!-- container -->

需要有关重新订购bootstrap列的建议

1 个答案: