Question

基本上我想使用引导程序来实现的是这样的（https://ibb.co/mBB9P6P）。当将其调整为较小的屏幕时，它应该喜欢（https://ibb.co/0XnDy2S）。当然，根据我使用的代码，发生的情况是第二张图片位于第二段后面

我的想法是使用Bootstrap的order-first和order-last类来实现此目的，并且在移动设备上工作时，在桌面上这两个图片都在左侧。我认为可行的方法是在不同的媒体查询中从div中删除一个类，但是我不确定这是否是一个选择。

<div class="row">
        <div class="col-md-3">
          <img src="img1.png">
        </div>
        <div class="col-md-9">
          <p>Text</p>
        </div>
 </div>
<div class="row">
        <div class="col-md-9">
          <p>Text</p>
        </div>
        <div class="col-md-3">
          <img src="img1.png">
        </div>
</div>

Answer 1

Bootstrap将屏幕分为12列网格。如果您选择md-3，那么您将获得最多四个cols。您可以在class属性中全部指定多种列格式。 https://getbootstrap.com/docs/4.0/layout/grid/希望能有所帮助。

Answer 2

如果您使用的是Bootstrap 4，则可以利用其基于flex的布局并使用order属性。这是一个示例：

@media (max-width: 768px) {
  .col-md-9 {
    order: 2;
  }
  .col-md-3 {
    order: 1;
  }
}

img {
width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-md-3">
    <img src="https://placehold.it/250x150">
  </div>
  <div class="col-md-9">
    <p>Text</p>
  </div>
</div>
<div class="row">
  <div class="col-md-9">
    <p>Text</p>
  </div>
  <div class="col-md-3">
    <img src="https://placehold.it/250x150">
  </div>
</div>

以下是玩弄的小提琴：https://jsfiddle.net/2mwxeor5/1/

Answer 3

Drop Bootstrap（仍然会导致更多问题）并使用flexbox。订单属性会为您提供帮助。

在不同屏幕上更改列的顺序

3 个答案: