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

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>

把两部分代码反过来，就OK了。 然后，请记住使用引导列来执行响应行为。

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