Question

我尝试使用boostrap 3创建布局，我想重新排序div列，如下所示：

从桌面列顺序（文本-图片，图像-文字）：

[TEXT] [IMAGE]

[IMAGE] [TEXT]

[TEXT] [IMAGE]

[IMAGE] [TEXT]

至移动列顺序（图像文本）：

[图像]

[TEXT]

[图像]

[TEXT]

[图像]

[TEXT]

[图像]

这是我的脚本：

<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>

Answer 1

请尝试以下代码：

<!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>

在移动设备中重新排序列

1 个答案: