在不同屏幕上更改列的顺序 [英] Changing order of columns on different screens

问题描述

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

basically what I'm trying to achieve using bootstrap is something like this (https://ibb.co/mBB9P6P). When it's resized to smaller screens it should like (https://ibb.co/0XnDy2S). Of course with the code I'm using, what happens is that second image goes behind second paragraph

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

My idea was using Bootstrap's order-first and order-last classes to achieve this and while it works for mobile, on desktop both pictures are on left. What I thought would work was removing a class from a div on different media query but I'm not sure if that's even an option.

<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 4，则可以利用其基于 flex 的布局并使用 order 属性.这是一个示例:

If you're using Bootstrap 4, then you can take advantage of its flex based layout and use the order property. Here is an example:

@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/

Here is a fiddle to play with: https://jsfiddle.net/2mwxeor5/1/

这篇关于在不同屏幕上更改列的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！