需要关于重新排序引导列的建议答案

【问题标题】：Need advice on re-ordering bootstrap columns需要关于重新排序引导列的建议
【发布时间】：2016-08-31 17:48:56
【问题描述】：

我需要以一定的顺序对这些列重新排序，以使屏幕小于引导程序中的 col-md。我尝试了这个答案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

【问题讨论】：

嗨 Pamblam 我试过这个解决方案，它适用于 3 列，但我无法让它按照我需要它们显示在移动视图中的特定顺序工作。如果您查看屏幕截图，它们需要按照非常具体的顺序排列。

标签： html twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案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 -->

【讨论】：

我的朋友太棒了，谢谢。我之前尝试过类似的东西，但似乎无法正确订购。