html - Bootstrap - 为反向行模式创建移动自适应

Question

我想用 Bootstrap 创建一个反向效果 (第一行:左边是文字，右边是图片 第二行:左边是图片，右边是文字 第三行:左边是文字，右边是图片 第四行:左边图片，右边文字

它还在继续!

它在大型设备上看起来非常漂亮，但当它在设备上显示时，它在逻辑上会进行调整，就好像图片一张接一张地显示一样!

我希望在移动设备上始终显示:向上 = 文本，向下 = 图片而不是变体。

这是两行的代码:

                  <!-- FIRST ROW -->
      <div class="row border-marine margin-bottom">
          <div class="col-lg-6 text-center">
            <h2 class="padding-bottom-large">Réfection de toiture</h2>
            <p>Que ce soit un toit de bardeau, de tôle ou à faible pente, Toitures l & l saura
            vous satisfaire</p>
          </div>
          <div id="no-padding" class="col-lg-6">
            <img src="assets/img/toiture.png" class="img-responsive" alt="">
          </div>
        </div>
                 <!-- SECOND ROW -->
        <div class="row border-marine margin-bottom">
          <div id="no-padding" class="col-lg-6">
            <img src="assets/img/ventilation.png" class="img-responsive" alt="">
          </div>
          <div class="col-lg-6 text-center">
            <h2 class="padding-bottom-small">Ventilation de toiture</h2>
            <p>Ayant effectué une centaine de travaux de ventilation de toiture, Toitures L & L
            possède les connaissances et l'expérience nécessaire à l'aération de votre toiture.</p>
          </div>
        </div>

How it looks on a large media device

How it looks on a mobile device

干杯!

Answer 1

假设您使用的是 Bootstrap 4 (这是 Bootstrap 的当前版本)，您正在使用 flexbox 引擎盖下。这意味着您可以简单地按照您希望它在 DOM 中的移动站点显示的方式布置内容(在 HTML 中的图像之前写出文本)，然后使用 flex-direction: row-reverse 对于您希望图像显示在桌面 View 左侧的行。要真正花哨，您可以将其应用于 .row:nth-of-type(even) (或 odd )每隔两行反转一次。

这可以从以下方面看出:

.row:nth-of-type(even) {
  flex-direction: row-reverse;
}

<!-- BOOTSTRAP REFERENCES -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- FIRST ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-large">Réfection de toiture</h2>
    <p>Que ce soit un toit de bardeau, de tôle ou à faible pente, Toitures l & l saura vous satisfaire</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>

<!-- SECOND ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-small">Ventilation de toiture</h2>
    <p>Ayant effectué une centaine de travaux de ventilation de toiture, Toitures L & L possède les connaissances et l'expérience nécessaire à l'aération de votre toiture.</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>

注意:我已经删除了你的 no-margin ID，因为这些是重复的，重复的 ID 是 not valid markup 。为了演示的目的，我还用占位符替换了您的图像。

---

Bootstrap 3.3解决方案:

Bootstrap 3.3 没有 flexbox 的便利性，因此您必须 float列。要达到相同的效果，您需要将第一列(内容) float 到 right。当您想要在左侧显示图像时，使用选择器 .row:nth-of-type(even) > .col-lg-6:first-of-type .

这可以从以下方面看出:

.row:nth-of-type(even) > .col-lg-6:first-of-type {
  float: right;
}

<!-- BOOTSTRAP REFERENCES -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- FIRST ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-large">Réfection de toiture</h2>
    <p>Que ce soit un toit de bardeau, de tôle ou à faible pente, Toitures l & l saura vous satisfaire</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>

<!-- SECOND ROW -->
<div class="row border-marine margin-bottom">
  <div class="col-lg-6 text-center">
    <h2 class="padding-bottom-small">Ventilation de toiture</h2>
    <p>Ayant effectué une centaine de travaux de ventilation de toiture, Toitures L & L possède les connaissances et l'expérience nécessaire à l'aération de votre toiture.</p>
  </div>
  <div class="col-lg-6">
    <img src="http://placehold.it/400" class="img-responsive" alt="">
  </div>
</div>