ブートストラップブロックがうまく動作しない

イメージとその隣にテキストを含む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; 
    }

出典

2016-06-14 Pixelsquare

'ブートストラップを使用しているので、インスタンスに使用することができ、また' COL-MD-6'クラス – Spluf

から 'height'を削除col-xs-push'と第2のイメージdivの 'col-xs-pull'（あなたが' col'ブートストラップクラスを設定したのと同じdivで）です。それはあなたのdivを並べ替えるでしょう。 – Spluf

私はこれを行うと、デスクトップ形式でも注文を変更します – Pixelsquare

だから、ここソリューションのplunkerです： https://plnkr.co/edit/6UadTBcpyG9vfxUlLCtp?p=preview

それは同様大画面でdivを並べ替えた理由は、あなたがしなければならない（私は:)この部分を忘れて、小さなミスを犯した）ということです小さな画面には常にデフォルトの位置を置き、大きな画面ではプル＆プッシュを使用して並べ替えを行います。ここ

はコードがあなたの体のためにもです：

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html"> 
      <img src="img/logo%20DM.png" alt="Logo De Morgen" /> 
      </a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse right"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#"> 
       <img src="img/facebook.png" alt="Logo van facebook" /> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
       <img src="img/twitter.png" alt="Logo van twitter" /> 
       </a> 
      </li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
     </div> 
    </nav> 
    <section class="first-block"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <h1>WIN DUO-COMBITICKETS VOOR   <br /> 
ROCK WERCHTER & TW CLASSIC</h1> 
     </div> 
     <div class="col-md-12"> 
      <p class="subline">Zak dit jaar af naar de heilige weide van Werchter op kosten van De Morgen.   <br /> 
Waag uw kans en maak kans op    <strong>duo-combitickets voor Rock Werchter</strong> 
      <br /> 
en    <strong>TW Classic</strong> 
. </p> 
      <img src="img/down.png" alt="Next button" /> 
     </div> 
     </div> 
    </section> 
    <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 col-md-push-6 image"> 
      <img src="img/rockwerchter.png" width="100%" height="auto" alt="" /> 
     </div> 
     <div class="col-md-6 col-md-pull-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> 
    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script> 
     window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>') 

    </script> 
    <script src="js/bootstrap.js"></script> 
    </body>

出典

2016-06-14 15:06:17 Spluf

ブートストラップブロックがうまく動作しない

答えて

関連する問題