如何在 Bootstrap 4 中制作奇数/偶数列?

Question

我有一个部分，它必须在左侧包含图像，在右侧包含文本，而在下一个列中，我有相反的情况，我的意思是，左侧是文本，右侧是图像。这是我的 html：

<section>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
</div>
</div>
</section>

在桌面上，它看起来应该如此，但在移动设备上，顺序应该始终首先是图像，然后是文本。

怎么办？

Answer 1

为此，您应该使用 flexbox order 实用程序类。弹性框订单引导程序

以全屏模式打开代码段。

向文本添加order-2 order-md-1，向图像添加order-1 order-md-2。 此外，为此，我必须用带有类row的div包装文本和图像

order-2 order-md-1意味着从最小的设备上，对项目2进行排序，在中等设备上，在1上进行排序

更新：您可以将行align-items-center添加到垂直居中项目

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 ">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6 ">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
</div>
</section>