bootstrap推拉麻烦

Question

我在使用bootstraps pull and pull功能时遇到问题 我想让我的网站看起来像

Desktop

和

一样

Mobile
我知道我必须以某种方式使用推拉，但我无法弄清楚如何，任何帮助将不胜感激。

编辑：

我应该说现在正在讨价还价的是移动电话堆栈 图像文本的文本的图像

Answer 1

如您所见，您想要：

T1 M1   (Desktop)
M2 T2


T1      (mobile)
M1
T2
M2

对于T1 M1 -> T1 M1，只需使用普通col，

对于M2 T2 -> T2 M2，您需要使用push/pull来撤销订单

在此处查看push/pull：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h

的示例

将这两者结合起来：

.textbox {
  height: 150px;
  width: 200px;
  background-color: aqua;
  display: inline-block;
}

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

<div class="container content">
  <div class="row">

    <!--text 1-->
    <div class="col-sm-3">
      <div class="textbox">
        <img src="https://dummyimage.com/200x150/000/fff" />
      </div>
    </div>

    <!--img 1-->
    <div class="col-sm-9">
      <div class="textbox">
        text 1
      </div>
    </div>

    <!--img 2-->
    <div class="col-sm-9 col-sm-push-3">
      <div class="textbox">
        <img src="https://dummyimage.com/200x150/000/fff" />
      </div>
    </div>

    <!--text 2-->
    <div class="col-sm-3 col-sm-pull-9">
      <div class="textbox">
        text 2
      </div>
    </div>

  </div>
</div>

Answer 2

处理此问题的最佳方法是使用bootstrap的css查询类。这个link可以帮助您了解如何从移动设备转换到桌面设备。