Jquery 响应框的问题

我的箱子有问题。我有三个按钮。单击按钮后，将显示一个详细信息框。我想在一行中显示小分辨率上每个框的按钮和细节框

现在：按钮，按钮，按钮；细节，细节，细节

我想要：按钮-详细信息；按钮-细节；按钮-详细信息

<div class="container clearfix">
    <a class="tab1" href="#">first</a>
    <a class="tab2" href="#">second</a>
    <a class="tab3" href="#">third</a>
</div>

<div class="box detail1">
    <div>detail 01</div>
</div>
<div class="box detail2">
    <div>detail 02</div>
</div>
<div class="box detail3">
    <div>detail 03</div>
</div>

详图01
细节02
细节03

问题是：

你知道解决办法吗？或者，最好的解决方案是为每个框复制按钮，并且仅以较小的分辨率显示（并隐藏原始按钮）

---

谢谢你的建议

您需要将html更改为一个接一个

<div class="container clearfix">
    <a class="tab1" href="#">first</a>
    <div class="box detail1">
        <div>detail 01</div>
    </div>
    <a class="tab2" href="#">second</a>
    <div class="box detail2">
        <div>detail 02</div>
    </div>
    <a class="tab3" href="#">third</a>

<div class="box detail3">
    <div>detail 03</div>
    </div>
</div>

详图01
细节02
细节03

在

.box

下添加

浮动：左。这将达到你想要的结果。我救了你一命

左边的浮动将确保元素紧跟在另一个元素之后。
您需要将html更改为一个接一个

<div class="container clearfix">
    <a class="tab1" href="#">first</a>
    <div class="box detail1">
        <div>detail 01</div>
    </div>
    <a class="tab2" href="#">second</a>
    <div class="box detail2">
        <div>detail 02</div>
    </div>
    <a class="tab3" href="#">third</a>

<div class="box detail3">
    <div>detail 03</div>
    </div>
</div>


详图01
细节02
细节03

在
.box
下添加
浮动：左。这将达到你想要的结果。我救了你一命

左边的浮动将确保元素紧跟在另一个元素之后。
您是指按钮和框彼此相邻还是位于另一行的下一行？我希望第一行的三个按钮和第二行的详细信息框具有正常分辨率。响应分辨率（@媒体屏幕和（最大宽度：600px））我想在每一行显示：按钮第一-详细信息01-按钮第二-详细信息02-按钮第三-详细信息03。然后您必须复制并隐藏原始按钮。您是指按钮和框彼此相邻还是位于另一行的下一行？我想在正常分辨率下显示第一行的三个按钮和第二行详细信息框。在响应分辨率（@media-screen and（max-width:600px））中，我希望在每一行上显示：按钮第一-细节01-按钮第二-细节02-按钮第三-细节03。然后您必须复制并隐藏原始按钮。不，我只希望以响应分辨率（@media-screen and（max-width:600px））显示这些按钮。在正常分辨率下，我需要前三个按钮和之后的详细信息框。不，我只需要响应分辨率（@media screen和（最大宽度：600px））。在正常分辨率下，我需要前三个按钮和之后的详细信息框。