bootstrap 中等屏幕下一行1个图片和1段文字，小屏幕下1行是图片，1行是文字

在Bootstrap中，为了适应不同的屏幕大小，你可以采用响应式设计和混合使用栅格系统（Grid System）来实现这种布局。这里有一个例子：

首先，确保你已经包含了Bootstrap的栅格系统类。对于大屏幕（例如：电脑）下的两列布局：

<div class="container">
  <div class="row justify-content-between">
    <div class="col-md-6">
      <!-- 图片 -->
      <img src="your-image-url" alt="图片描述" class="img-fluid">
    </div>
    <div class="col-md-6">
      <!-- 文字 -->
      <p>这是在大屏幕下的一行内容，包括一段文字...</p>
    </div>
  </div>
</div>

在这个代码片段中，`col-md-6`表示每个元素在中等屏幕（md）及以上设备占据一列，`justify-content-between`会让两个元素均匀分布在一行里。

接下来，针对小屏幕（比如手机），我们只保留一列，同时可能需要改变图片的展示方式，例如使用`col-sm-12`（满屏）：

<div class="row">
  <div class="col-sm-12">
    <!-- 小屏幕下，如果是图片优先，可以将其包裹在一个媒体查询块中 -->
    <div class="d-block d-sm-none">
      <img src="your-image-url" alt="图片描述" class="img-fluid">
    </div>
    <!-- 文字则始终显示，不需要媒体查询 -->
    <p>这是在小屏幕上的一行内容，包括一段文字...</p>
  </div>
</div>

这里使用了`d-block`和`d-sm-none`来控制隐藏和显示，当屏幕宽度小于sm时，图片会被隐藏，文字独占一行。