Question

我想知道如何根据浏览器大小（移动缩放）交换内容。我在这里使用Bootstrap。

请参阅下面的代码段。你可以看到我有两行，每一行都有一张图片和文字。第一个是左侧的Pic，右侧是文本，第二个是相反的。

所以设置

<IMG> <Text>
<Text> <IMG>

当您缩小浏览器大小（又称移动版）时，它会自动跳转到：

<IMG>
<TEXT>
<TEXT>
<IMG>

一切都很好。

但我怎样才能做到：

<IMG>
<TEXT>
<IMG>
<TEXT>

据我所知，我可以根据浏览器大小使用CSS @media查询来基本复制内容，并在其上执行“display：hidden”等。

但是有没有其他解决办法来解决这个问题而不是复制一切？我发现了类似的问题，但除了使用@media“作弊”之外，没有任何具体的问题。

意见＆amp;非常感谢帮助。非常感谢

PS：要明确一点。我希望订单

<IMG> <Text>
<Text> <IMG>

当它是“桌面”（目前正确）但需要它

<IMG>
<TEXT>
<IMG>
<TEXT>

当它是“移动”时（重新订购）。因此，当浏览器调整大小时，它必须动态更改其顺序。据我所知，使用Bootstrap的“推”“拉”不会这样做，即使使用@media查询也显然是静态的。正确？

           <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-6 half-left" >
                            <img class="" src="..."/>
                        </div>

                        <div class="col-sm-6 half-right">
                            <p>Content here</p>

                        </div>
                    </div>


                    <div class="row">                       
                        <div class="col-sm-6 half-left" >
                            <p class="largeFontP">Content here</p>
                        </div>

                        <div class="col-sm-6 half-right">
                            <img class="" src=""/>
                        </div>
                    </div>


                </div>

Answer 1

使用bootstrap你可以通过推拉类来左右推'和'拉'列。

<div class="col-sm-6 half-left col-sm-push-6">
     <img class="" src="..."/>
</div>

这种方式在较小的浏览器上可以向右推或向左拉。上面的代码会将<div> 6列推到其初始位置的右侧。要在小屏幕上向左移动6列，您将使用类似的类col-sm-pull-6。

在“列排序”下的引导文档中阅读更多内容：

http://getbootstrap.com/css/

Answer 2

首先使标记适用于移动布局（请注意＆＃34;移动优先＆＃34;），然后使用push pull类来调整更大的屏幕..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 half-left">
            <img class="img-responsive" src="//placehold.it/500x200">
        </div>
        <div class="col-sm-6 half-right">
            <p>Content here</p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 half-right col-sm-push-6">
            <img class="img-responsive" src="//placehold.it/500x200">
        </div>
        <div class="col-sm-6 half-left col-sm-pull-6">
            <p class="largeFontP">Content here</p>
        </div>
    </div>
</div>

http://www.codeply.com/go/NSOeIemufV

Answer 3

使用媒体查询，我也建议使用flexbox。

此处链接：media queries和flexbox

您的问题是使用行的div。你应该使用一个父母或类似的东西

<parent>
   <wrap><img><text></wrap>
   <wrap><img><text></wrap>
   <wrap><img><text></wrap>
   <wrap><img><text></wrap>
</parent>

然后只给父显示：flex和flex-wrap：wrap。好吧，就去玩flexbox吧。

HTML根据浏览器大小更改列

3 个答案: