Колонка повторного заказа в мобильном телефоне - PullRequest
Новая
       35

Колонка повторного заказа в мобильном телефоне

0 голосов
/ 25 апреля 2019

Я попытался создать макет с Boostrap 3, и я хочу изменить порядок столбца div следующим образом:

Из порядка столбцов рабочего стола (текст - изображение, изображение - текст):

[ТЕКСТ] [ИЗОБРАЖЕНИЕ]

[ИЗОБРАЖЕНИЕ] [ТЕКСТ]

[ТЕКСТ] [ИЗОБРАЖЕНИЕ]

[ИЗОБРАЖЕНИЕ] [ТЕКСТ]

В мобильный порядок столбцов (изображение-текст):

[ИЗОБРАЖЕНИЕ]

[TEXT]

[IMAGE]

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

1 Ответ

1 голос
/ 25 апреля 2019

пожалуйста, попробуйте этот код: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...