bootstrap 中等屏幕下一行1个图片和1段文字，小屏幕下1行是图片1行是文字，同一个网页的要求

在Bootstrap中，你可以使用栅格系统（Grid System）和响应式设计来满足这种布局需求。对于大屏幕（如平板和电脑）下的布局，可以使用row和col-sm-6 (代表每行显示两个半宽列) 来组合图片和文本：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="your-image-source" alt="Image Description"> <!-- 图片 -->
    </div>
    <div class="col-md-6">
      <p>这是您的文本描述，这里的内容会占据另一半宽度。</p> <!-- 文字 -->
    </div>
  </div>
</div>

对于小屏幕（如手机端）下，当屏幕宽度小于768px时，你可以将两列合并成一列，让图片和文字都在同一行显示。这时可以使用col-sm-12代替col-md-6：

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <img src="your-image-source" alt="Image Description" style="margin-bottom: 1rem;"> <!-- 图片，添加外边距保证间距 -->
      <p>这是您的文本描述，现在会在同一行显示。</p> <!-- 文字 -->
    </div>
  </div>
</div>

记得要在CSS中设置适当的样式和媒体查询，以确保在不同设备上良好的用户体验。