如何修改Owl Carousel 使文字在所有设备下位于图片下方

问题出在当前布局的响应式flex设置上：

• 你的.work-wrap类用了d-md-flex，这表示仅在中等屏幕（≥768px）才启用flex布局，此时图片通过order-md-last被调整到右侧，和文字并排；而小屏设备是块级布局，元素自动垂直排列，所以文字在图片下方。

要让所有设备都保持文字在图片下方，按以下方式修改：

方式一：直接调整HTML结构 #

1. 将.work-wrap的d-md-flex替换为flex flex-column，这样所有屏幕尺寸下都启用垂直方向的flex布局：

   <div class="work-wrap flex flex-column">
   

2. 移除图片元素的order-md-last类，因为垂直flex布局下元素默认按HTML顺序排列（图片在上，文字在下）：

   <div class="img" style="background-image: url(01.jpg);"></div>
   

方式二：通过CSS覆盖样式（适合无法修改HTML的情况） #

在你的styles_test.css中添加以下代码，强制.work-wrap使用垂直flex布局，并取消图片的顺序调整：

.work-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.work-wrap .img {
  order: initial !important; /* 取消order-md-last的影响 */
}

两种方式任选其一，都能实现所有设备上文字始终位于图片下方的效果。

内容的提问来源于stack exchange，提问作者BeachNut