1

我的目标是有三行，每行包含一个图像和文本。我希望行的布局在不堆叠时交替图像定位，但在较小的屏幕上保持统一的堆叠布局。像这样：

大屏幕

第 1 行：img1 左，img1-text 右
第 2 行：img2-text 左，img2 右
第 3 行：img3 左，img3-text 右

小屏幕

img1
img1-文本
img2
img2-文本
img3
img3-文本

我试图通过添加重复的图像并相应地隐藏和显示相应的 img 来解决这个问题，但我不喜欢这种方法。我怎样才能达到我想要的结果？这是HTML：

  <div class="row">

    <h1>Lorem ipsum.</h1>

    <div class="col-sm-5">
      <img class="img img-fluid" src="img/crowd-of-users.svg"/>
    </div>

    <div class="col-sm-7">
      <h2>lorem ipsum.</h2>
      <h7>lorem ipsum lorem ipsum lorem ipsum.</h7>
    </div>

  </div>

  <div class="row">

    <div class="col-sm-5">
          <img class="show-alt img img-fluid" src="img/strategy (1).svg"/>
    </div>

    <div class="col-sm-7">
      <h2>Lorem ipsum</h2>
      <h7>lorem ipsum lorem ipsum lorem ipsum</h7>
    </div>

    <div class="col-sm-5">
      <img class="hide-alt img img-fluid" src="img/strategy (1).svg"/>
    </div>

  </div>

  <div class="row">

    <div class="col-sm-5">
      <img class="img img-fluid" src="img/money (1).svg"/>
    </div>

    <div class="col-sm-7">
      <h2>Lorem ipsum.</h2>
      <h7>lorem ipsum lorem ipsum lorem ipsum.</h7>
    </div>

  </div>

这是CSS：

.img {
    width:50%;
    height: auto;
  }
  .btf {
    padding-top:10%;
  }
 @media screen and (max-width: 767px){
    .hide-alt {
      display: none;
    }
  }
  @media screen and (min-width:768px){
   .show-alt {
     display: none;
   } 
  }

如果我错过了一个现有的 SO 条目，请随时指出，我不确定用于查找答案的关键字，干杯

4

0 回答 0