Question

我有一个网站，并希望将其放入其中，但它不能按我的意愿工作。当我缩小窗口时，它看起来像这样 -

我在这里使用过bootstrap。我试图解决中间列的交换内容，但它没有工作。

当我将屏幕缩小到767px时，我想交换中间列的内容位置。

我想在收缩后看起来像这样 -

请帮我解决这个问题。

谢谢。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container" id="web-info-col">
        <div class="col-sm-12 column">
                <div class="col-sm-6 web-info-title">
                        <img src="https://lh5.ggpht.com/cxBQn2h-I7umlBzFyIQ1IYSsZWC1SIdp6-cQxHuPX-QelGD8jMR5YgXuZlPnHz9ZHC4yQ6DKOQFUt6ouZc8fDg=s50" />
                        <h3 class="title">Discovery Strategy</h3>
                </div>
                <div class="col-sm-6 web-info-content">
                        <p>Get honest app reviews from the developer community.  Set the daily reviews per app and get a <strong>consistent</strong> flow of reviews.</p>
                </div>
        </div>
        <div class="col-sm-12 column">
                <div class="col-sm-6 web-info-content">
                        <p>5% of developers don't have a single review for any of their apps.  Get <strong>unlimited</strong> reviews using our karma economy.</p>
                </div>
                <div class="col-sm-6 web-info-title">
                        <img src="https://lh4.ggpht.com/Bh6KdE6KntFGaLe6jdANbd2UmI7KADT67NjhPifO1ogZNktqr_X1Si_xQFNKO0k_Y7dEpx2bnr-7M0_5EsSRfg=s50" />
                        <h3 class="title">Unlimited Reviews</h3>
                </div>
        </div>
        <div class="col-sm-12 column">
                <div class="col-sm-6 web-info-title">
                        <img src="https://lh5.ggpht.com/X64zT-rJH6WzBLK5etDoqIKw98FiSWK0r_qL4JtXn8Z0Jq_wX4kl2A3ItdUlkl4-AM5znsfDlamhgrw8xaM0=s50" />
                        <h3 class="title">App Masterminds</h3>
                </div>
                <div class="col-sm-6 web-info-content">
                        <p>Collaborate with other developers, share knowledge and techniques on producing more <strong>profitable</strong> apps.</p>
                </div>
        </div>
</div>

和css是

#web-info-col .col-sm-12{
            display: flex;
            justify-content: center;
            margin: 20px 0 20px 0;
    }
    #web-info-col .web-info-title{
            background: #f2f2f2;
    }
    #web-info-col .web-info-content{
            background: #fafafa;
    }
    @media only screen and (max-width:767px){
            #web-info-col .column{
                    display: block;
            }
            #web-info-col div.col-sm-12 .web-info-content{
                    padding: 20px;
            }
            #web-info-col div.web-info-title{
                    box-shadow: none;
                    padding: 20px;
                    box-shadow: 0px 11px 7px -6px #ccc;
            }
            #web-info-col .column:nth-child(2) .web-info-title{
                    background: #fafafa;
                    z-index: 0;
                    box-shadow: none;
            }
            #web-info-col .column:nth-child(2) .web-info-content{
                    background: #f2f2f2;
                    z-index: 1;
        box-shadow: 0px 11px 7px -6px #ccc;
            }
    }

Answer 1

您正尝试在内容后添加标题。

<div class="col-sm-6 web-info-content">
 <p>5% of developers don't have a single review for any of their apps. Get <strong>unlimited</strong> reviews using our karma economy.</p>
 </div>
 <div class="col-sm-6 web-info-title">
 <img src="https://lh4.ggpht.com/Bh6KdE6KntFGaLe6jdANbd2UmI7KADT67NjhPifO1ogZNktqr_X1Si_xQFNKO0k_Y7dEpx2bnr-7M0_5EsSRfg=s50" />
 <h3 class="title">Unlimited Reviews</h3>
 </div>

反转代码的两个部分，一切都会好的。然后，记得使用bootstrap列来执行响应行为。

https://getbootstrap.com/examples/grid/

Answer 2

在html标题中注入以下内容以交换宽度为767px的内容。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

    jQuery(document).ready(function($) 
    {
    var wsize = $( window ).width();
    if(wsize <=767)
    {
    $("div.swappable").html('<div class="col-sm-6 web-info-title">'
                           +'<img src="https://lh4.ggpht.com/Bh6KdE6KntFGaLe6jdANbd2UmI7KADT67NjhPifO1ogZNktqr_X1Si_xQFNKO0k_Y7dEpx2bnr-7M0_5EsSRfg=s50" />'
                           +'<h3 class="title">Unlimited Reviews</h3>'
                           +'</div>'    
                           +'<div class="col-sm-6 web-info-content">'
                           +'<p>5% of developers don\'t have so and so.. </p>'
                           +'</div>'
                         '); 

    }
    });
<script>

并将选择器类swappable添加到父分部，如下所示：

<div class="col-sm-12 column swappable">
        <div class="col-sm-6 web-info-content">
            <p>5% of developers don't have a single review for any of their apps.  Get <strong>unlimited</strong> reviews using our karma economy.</p>
        </div>
        <div class="col-sm-6 web-info-title">
            <img src="https://lh4.ggpht.com/Bh6KdE6KntFGaLe6jdANbd2UmI7KADT67NjhPifO1ogZNktqr_X1Si_xQFNKO0k_Y7dEpx2bnr-7M0_5EsSRfg=s50" />
            <h3 class="title">Unlimited Reviews</h3>
        </div>
    </div>

重要：

请注意，替换模式中的所有single quotes都应该像5% of developers don\'t一样进行转义，否则会破坏脚本。

注意：
如果已包含jquery.min.js，则可能不会包含此内容。

Answer 3

只需颠倒html中2个部分的顺序。

<div class="col-sm-12 column">
 <div class="col-sm-6 web-info-content">
 <p>5% of developers don't have a single review for any of their apps. Get <strong>unlimited</strong> reviews using our karma economy.</p>
 </div>
 <div class="col-sm-6 web-info-title">
 <img src="https://lh4.ggpht.com/Bh6KdE6KntFGaLe6jdANbd2UmI7KADT67NjhPifO1ogZNktqr_X1Si_xQFNKO0k_Y7dEpx2bnr-7M0_5EsSRfg=s50" />
 <h3 class="title">Unlimited Reviews</h3>
 </div>
 </div>

到

<div class="col-sm-12 column">
 <div class="col-sm-6 web-info-title">
 <img src="https://lh4.ggpht.com/Bh6KdE6KntFGaLe6jdANbd2UmI7KADT67NjhPifO1ogZNktqr_X1Si_xQFNKO0k_Y7dEpx2bnr-7M0_5EsSRfg=s50" />
 <h3 class="title">Unlimited Reviews</h3>
 </div>
 <div class="col-sm-6 web-info-content">
 <p>5% of developers don't have a single review for any of their apps. Get <strong>unlimited</strong> reviews using our karma economy.</p>
 </div>
 </div>

我想在中间栏中更改内容的位置

3 个答案: