Bootstrap flex-column-reverse将列推到新行

Question

我想让我的网页布局像这样设置在MD和更大:

img - content
content - img

但是在较小的屏幕上，我希望先显示内容，然后显示图像，像这样:

content
img

我可以用这行代码来做到这一点，行是img-content:

flex-column-reverse flex-md-row

但是所有这些都取决于我如何排序HTML，我使用的是vue组件，所以我不想改变我的html顺序，它可能会增加太多的复杂性

所以我保持HTML顺序一致。

这是我的代码:

<div class="row p-5 flex-column-reverse flex-md-row">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title ">lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>

// Next row

<div class="row p-5 flex-column-reverse ">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title "> lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>

下面是jsfiddle

中的设置反向类确实颠倒了顺序，但是问题使用这种方法是出于一些奇怪的原因，下一行应该是content-img，图像被推到下一行。

有人知道为什么和如何让它不推到新的行吗?

Answer 1

我们反复讨论了一下，找到了解决办法。

flex-column-reverse

-是垂直的反转，因此它总是把它推到新行，所以它是唯一的一个，我们的行不知道在更大的尺寸上改变所以我们添加了这个:

flex-md-row-reverse

注意其中的row，因为我们正在设置它，水平

Answer 2

如果您希望在小屏幕上显示content/image - content/image，那么您应该这样设置顺序。然后，为了让内容和图像在更大的屏幕上交换位置，将order-md-first添加到偶数行。

我已经修改了你的小提琴代码:

<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title ">Title 1</h2>
<p class="about-p text-muted">Desc 1</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper">
<h2>MY IMAGE1</h2>
</div>
</div>

// Next row
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title "> Title 2</h2>
<p class="about-p text-muted">Desc 2</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper order-md-first">
<h2>MY IMAGE2</h2>
</div>
</div>
</div>