元素在桌面上浮动，在移动设备中位于另一个元素的底部

Question

我已经尝试了几个小时来使用 html 和 css（以及 Bootstrap，如果需要）设置以下布局：

即：

• 对于桌面，卡片（或任何元素）应该浮动在右边
• 对于移动设备，卡片应位于文本下方

只使用 float:right 的问题是浮动元素应该位于文本之前的 html 中，但在移动设备中该元素将显示在文本的顶部，而我希望它位于底部。

令人惊讶的是，我找不到任何现有的问题（也许我只是没有使用正确的关键字）。我发现的最相似的问题是CSS floats, change order on mobile layout?，但这不是同一个问题。

我解决的第一个想法是直接使用Bootstrap的分栏系统，但是如果文本元素的高度大于浮动元素，它会停留在同一列，不会继续低于浮动元素。

我最终找到了一个解决方案（我将作为答案发布），但由于我花了很长时间才弄清楚，我想我还是会提出一个问题，以节省面临同样问题的其他人的时间。另外可能有人会提出比我更好的解决方案。

Answer 1

最终对我有用的解决方案结合起来：

• 为桌面使用浮动元素，以及
• 使用 css 改变手机中元素的顺序

.card-read-more {
  max-width: 40%;
  float: right;
  padding: 10px;
  border: 1px solid black;
  margin-left: 10px;
}

@media only screen and (max-width: 400px) {
  .read-more-container {
    display: flex !important;
    flex-direction: column;
  }
  .card-read-more {
    order: 2;
    max-width: 100%;
    float: none;
  }
}

<div class="read-more-container">
  <div class="card-read-more">
    My card or image or whatever content.
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>