使用 Bootstrap 和/或 Bootstrap flex 重新排序列 [重复]答案

【问题标题】：Reorder Columns with Bootstrap and/or Bootstrap flex [duplicate]使用 Bootstrap 和/或 Bootstrap flex 重新排序列 [重复]
【发布时间】：2017-12-05 16:30:42
【问题描述】：

目前我有这个：

                <div class="row">
                    <div class="col-md-6">
                        <p>A long borring text</p>
                    </div>

                    <div class="col-md-6">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>

在移动设备上，这会导致 #1 文本 #2 照片的顺序，但我希望照片是 #1 和文本 #2。

【问题讨论】：

标签： css flexbox twitter-bootstrap-4

【解决方案1】：

HTML

<div class="row flex reverse-column">
    <div class="col-md-6">
        <p>A long borring text</p>
    </div>

    <div class="col-md-6">
        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
    </div>               
</div>

CSS

  @media( max-width: 767px ){

    .flex{
      display: flex;
    }
    .flex.reverse-column{
      flex-direction: column-reverse;
    }
  }

【讨论】：

【解决方案2】：

在你的两个 div 中添加两个 id，你可以使用 jquery 翻转 div，但这里我只使用 css。希望它能完成你的工作。

  <style>
  /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.row   { display: table; }
#first  { display: table-footer-group; }
#second { display: table-header-group; }
}

</style>
                <div class="row" >
                    <div class="col-md-6" id ="first">
                        <p>A long borring text</p>
                    </div>

                    <div class="col-md-6" id="second">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>

【讨论】：