Question

我正在尝试使用图像和旁边的一些文本制作2个部分。当我改变浏览器宽度时，它们可能不会相互流动，但我无法解决它..

我希望在彼此之下做得很好，当移动首先拍摄照片然后是文字

的jsfiddle

HTML

<section class="second-block">
    <div class="row">
        <div class="col-md-6 image">
            <img src="img/rockwerchter.png" width="100%" height="auto" alt="">
        </div>
        <div class="col-md-6 tekst">
            <h2>
            Rock Werchter
            <br>
            30/06 - 03/07
            </h2>
            <p>
                Rock Werchter is officieel én officeus nog steeds het beste festival ter wereld. Op de affiche staan toppers als Sir Paul McCartney, Ellie Goulding, Disclosure en New Order. Overnachten doet u in een luxueuze chalet met een royaal ontbijtbuffet, warmwaterdouches en buitenzwembad.
            </p>
        </div>
    </div>
</section>

<section class="second-block">
    <div class="row">
        <div class="col-md-6 tekst">
            <h2>
            Rock Werchter
            <br>
            30/06 - 03/07
            </h2>
            <p>
                Rock Werchter is officieel én officeus nog steeds het beste festival ter wereld. Op de affiche staan toppers als Sir Paul McCartney, Ellie Goulding, Disclosure en New Order. Overnachten doet u in een luxueuze chalet met een royaal ontbijtbuffet, warmwaterdouches en buitenzwembad.
            </p>
        </div>
        <div class="col-md-6 image">
            <img src="img/rockwerchter.png" width="100%" height="auto" alt="">
        </div>
    </div>
</section>

CSS

 body {
        padding-top: 50px;
        background: #ffffff;
        color: #212121;
        overflow-x: hidden;
    }

    .navbar-inverse {
        border-bottom: #ff0021 7px solid;
    }

    .first-block{
        background-color: #e6e6e6;
        padding: 20px 0;
        text-align: center;
    }
    .first-block h1 {
        text-transform: uppercase;
        color: #ff0021;
        font-size: 50px;
        padding: 15px 0;
    }
    .subline {
        font-size: 20px;
        padding: 20px 0;
    }
    .second-block {
        min-height: 463px;
    }
    .col-md-6 {
        height: 250px;
        padding-right: 0px;
        padding-left: 0px;
    }
    .tekst {
        padding: 25px 45px;
    }

Answer 1

所以，这是解决方案的plunker： https://plnkr.co/edit/6UadTBcpyG9vfxUlLCtp?p=preview

它在大屏幕上重新排序div的原因是（我犯了一个小错误忘记了这一部分:)）你应该总是把默认位置放在小屏幕上并使用拉动和推动在大屏幕上重新排序

这里是你身体的代码：

val s by lazy { RemoteService.result() }

Bootstrap块表现不佳

1 个答案: