Html 如何使其成为块元素？

下面的代码完全像一个表。当我缩小页面时，我希望它的名字是foo first，在姓氏-foo last下面。我被困在这里了。我知道我需要使用“@media” 仅屏幕和（最大宽度：760像素）， （最小设备宽度：768px）和（最大设备宽度：1024px）”。但是从那以后我就迷路了。提前谢谢

<div id="Main">
    <section id="sub">
        <div>First Name</div>
        <div>Last Name</div>
        <div>Middle Name</div>
    </section>
    <section id="sub2">
        <div>foo first</div>
        <div>foo Last</div>
        <div>foo Middle</div>
    </section>
</div>

名字
姓
中名
富优先
福拉斯特
富中

您可以像下面这样修改HTML。使所有div元素以49%或50%的固定宽度向左浮动。当它有空间时，它会并排浮动，而当没有足够的空间来浮动时，第二个div会收起。在这种情况下，可能不需要媒体查询，除非它是您的设计约束

Css此处： #主节分区{浮动：左；宽度：50%；} 此处为HTML：

<div id="Main">
    <section id="sub">
        <div>First Name</div>
        <div>foo first</div>
    </section>
    <section id="sub1">
        <div>Last Name</div>
        <div>foo Last</div>
    </section>
    <section id="sub2">
        <div>Middle Name</div>
        <div>foo Middle</div>
    </section>
</div>

名字
富优先
姓
福拉斯特
中名
富中

你说得对，那就行了。但是，我不能更改我的html。它是动态的。