更改不同屏幕上的列顺序答案

【问题标题】：Changing order of columns on different screens更改不同屏幕上的列顺序
【发布时间】：2019-04-03 02:43:14
【问题描述】：

基本上我想要使用引导程序实现的目标是这样的 (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>

【问题讨论】：

您已将此标记为 Bootstrap 3。如果您使用的是使用 flex 的 Bootstrap 4，您可以使用 order 属性。看看我的回答：stackoverflow.com/questions/30696662/…
看来这可以解决我的问题，我会尽快尝试，谢谢！

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

【讨论】：

Evan 的意思是你的图片div 标签应该是col-md-3 col-sm-12，而你的文字div 标签应该是col-md-9 col-sm-12。这将使图像在中+屏幕上占 3/12，在小屏幕上占 12/12，文本在中+屏幕上占 9/12，在小屏幕上占 12/12。
好的，感谢您提供的信息！问题是它并不能真正回答我关于在不同屏幕上更改订单的可能性的问题

【解决方案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/

【讨论】：

哇，太棒了！正是我想要的。干杯伙伴！
@PetarBrković 太棒了！如果您对答案进行投票并将其标记为已接受，那将对未来的访问者有所帮助。谢谢！！

【解决方案3】：

放弃 Bootstrap（无论如何它会导致更多问题）并使用 flexbox。 order 属性将为您提供帮助。

【讨论】：

为什么 Bootstrap 会导致更多问题？这是 OP 正在使用的框架。Bootstrap 4 是基于 flexbox 的。