Html 在手机上操作浮动顺序CSS

我想在桌面上浮动一个图像，旁边有文本。现在我有一个div代码块，它的bkgd是红色的，高度和宽度是100px。在移动设备上，我想先堆叠文本，然后将图像浮动到其右下方。我无法通过浮动或清除来实现这一点。有人知道我不需要绝对定位就能做到这一点吗

#float1{
浮动：对；
背景：红色；
宽度：100px；
高度：100px；
}
@媒体屏幕和屏幕（最大宽度：365px）{
#浮动1{
浮动：无；
}
}

float-one
Lorem ipsum dolor sit amet，奉献精英。劳动之光？所有人都是尼莫，多洛里布·福加，他们都是大法官。Odio fugiat，libero asperiores aut iure？

您应该使用flexbox来实现它

在HTML中会有类似的内容：

<div class="wrapper">
    <div id="float1">float one </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum doloribus laborum harum non? Quod omnis nemo, doloribus fuga, perferendis sed officiis magnam magni adipisci. Odio fugiat, libero asperiores aut iure?</p>
</div>

希望给你一个实现目标的起点：）

---

注意，这是未经测试的。但是它应该可以工作

我认为你的代码是正确的，但是你必须像这样改变Html代码的顺序

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum doloribus laborum harum non? Quod omnis nemo, doloribus fuga, perferendis sed officiis magnam magni adipisci. Odio fugiat, libero asperiores aut iure?</p>
<div id="float1">float one </div>

Lorem ipsum door sit amet，Concertetur adipising elit。劳动之光？所有人都是尼莫，多洛里布·福加，他们都是大法官。奥迪奥·福吉亚特，自由人

浮一

如果您使用

flex

或

grid

代替

float

，您可以使用：

order

CSS属性设置项目在flex或网格容器中的布局顺序。容器中的项目按升序值排序，然后按其源代码顺序排序

带有

flex

container+

order

的示例

#float1{
顺序：1；
背景：红色；
宽度：100px；
高度：100px；
}
p{
弹性：1；
/*默认顺序为0*/
}
第{/*节可以是body，但我认为最好使用容器*/
显示器：flex；
柔性包装：包装；
}
@媒体屏幕和屏幕（最大宽度：365px）{
p{
flex basis:100%；/*它将使用整个宽度，flex子项将包裹*/
}
}

浮一
Lorem ipsum dolor sit amet，奉献精英。劳动之光？所有人都是尼莫，多洛里布·福加，他们都是大法官。奥迪奥·福吉亚特，自由人

将其全部包装在一个div中，然后使用flex box即可。我更新了我的问题，这里有一个宽度为100px的红色div FlexBox是最佳方法。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum doloribus laborum harum non? Quod omnis nemo, doloribus fuga, perferendis sed officiis magnam magni adipisci. Odio fugiat, libero asperiores aut iure?</p>
<div id="float1">float one </div>