Html 如何将div环绕在左上角的div上

我有这个布局

<div class="comment">
<div class="leftpart">
</div>
<div class="rightpart">
</div>
</div>

在桌面上，我让它保持样式，每个div都在它自己的部分中，里面没有浮动的内容

在手机上，我希望左半部位于评论的左上角，右半部位于评论的右半部，并像这样环绕评论

|-------| Right div |
|Left   | right div |
|  div  | right div |
|<auto->| right div |
|-------| right div |
|right div this div |
|<--- 100% width--->|

|-----|右div|
|左|右div|
|div |右div|
||右分区|
|-------|右分区|
|右舵，本舵|
||

---

如何在不更改html代码的情况下实现这一点？

为了将元素位置强制到一侧，应该使用float CSS属性通过将.leftpart浮动到左侧，它将保留在那里，并将剩余的内容放在.comment div上，环绕它。

我举了一个例子：

这就是你要找的吗

HTML

---

我希望这篇文章能有一个圆满的结局。在您的示例中，div并排排列，但我希望leftpart位于左上角，而rightpart不完全位于右侧，但只要leftpart不在comment中。@Anthony我已更新了上面文件中的代码，使其可以这样做。现在是正确的吗？

<div class="comment">
    <div class="leftpart"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut neque lacus, imperdiet vitae condimentum a, aliquam ut ante. Vivamus nulla quam, rutrum sit amet augue a, semper gravida eros. Nulla sit amet fermentum est, eget lobortis dui. Cras ut pretium justo. Nunc tortor risus, vulputate nec accumsan id, fermentum vulputate felis. Suspendisse mi quam, molestie sit amet pellentesque lobortis, placerat vel nisi. Ut scelerisque lacus magna, quis volutpat purus vulputate at. Sed volutpat risus sit amet lectus sollicitudin porta. Aenean tempus quis est vitae pretium.</p>
</div>

.comment {
    width:300px;
    padding:5px;
    background:#f00;
}
.leftpart {
    width:150px;
    height:250px;
    margin:0 10px 10px 0;
    background:#0f0;
    float:left;
}