在Mobile中重新排序列

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Mobile中重新排序列相关的知识,希望对你有一定的参考价值。

我尝试使用bootstrap 3创建一个布局,我想重新排序div列,如下所示:

从桌面列顺序(文本 - 图像,图像 - 文本):

[文字] [图片]

[图片] [文字]

[文字] [图片]

[图片] [文字]

到移动列顺序(图像文本):

[图片]

[文本]

[图片]

[文本]

[图片]

[文本]

[图片]

这是我的脚本:

<div class="row align-items-center">
            <div class="col-lg-6">
                <div class="about-content">
                    <h1>Our Story</h1>
                    <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
                <div class="about-img">
                    <img src="img/banner/new2.png" alt="">
                </div>
            </div>
            <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
                <div class="about-img">
                    <img src="img/banner/icon.png" alt="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-content">
                    <h3>Our Story</h3>
                    <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
                </div>
            </div>
             <div class="col-lg-6">
                <div class="about-content">
                    <h3>Our Story</h3>
                    <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
                </div>
            </div>
             <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
                <div class="about-img">
                    <img src="img/banner/icon2.png" alt="">
                </div>
            </div>
            <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
                <div class="about-img">
                    <img src="img/banner/icon1.png" alt="">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-content">
                    <h3>Our Story</h3>
                    <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="about-content">
                    <h3>Our Story</h3>
                    <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
                <div class="about-img">
                    <img src="img/banner/4.png" alt="">
                </div>
            </div>
        </div>
答案

请试试这段代码:

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  <style>
    @media (max-width: 991px) {
      .column-reverse {
        display: flex;
        flex-direction: column-reverse;
      }
    }
  </style>
</head>
<body>
<div class="container">
    <div class="row align-items-center column-reverse">
      <div class="col-lg-6">
          <div class="about-content">
              <h1>Our Story</h1>
              <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
          </div>
      </div>
      <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
          <div class="about-img">
              <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" class="img-responsive" alt="">
          </div>
      </div>
    </div>

    <div class="row align-items-center">  
      <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
          <div class="about-img">
              <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" class="img-responsive" alt="">
          </div>
      </div>
      <div class="col-lg-6">
          <div class="about-content">
              <h3>Our Story</h3>
              <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
          </div>
      </div>
    </div>

    <div class="row align-items-center column-reverse">  
       <div class="col-lg-6">
          <div class="about-content">
              <h3>Our Story</h3>
              <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
          </div>
      </div>
       <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
          <div class="about-img">
              <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" class="img-responsive" alt="">
          </div>
      </div>
    </div>

    <div class="row align-items-center">  
      <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
          <div class="about-img">
              <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" class="img-responsive" alt="">
          </div>
      </div>
      <div class="col-lg-6">
          <div class="about-content">
              <h3>Our Story</h3>
              <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
          </div>
      </div>
    </div>

    <div class="row align-items-center column-reverse">  
      <div class="col-lg-5">
          <div class="about-content">
              <h3>Our Story</h3>
              <p>Void gathering midst together you're shall. Beast set he <br>likeness spirit winged two all fourth they're gathered<br> seasons very may heaven saying. Fly image th</p>
          </div>
      </div>
      <div class="col-md-6 col-lg-6 mb-4 mb-lg-4">
          <div class="about-img">
              <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" class="img-responsive" alt="">
          </div>
      </div>
    </div>
    </div>
</body>
</html>

以上是关于在Mobile中重新排序列的主要内容,如果未能解决你的问题,请参考以下文章

使用Angularjs重新排序html表中的列

如何在pentaho中使用csv输入固定列重新排序列

使用导航架构时如何设置“允许重新排序”?

UNION表时如何在Bigquery中重新排列/重新排序嵌套的重复列

sql怎么对列重新排序

在语义 UI 可堆叠网格中重新排序列