html - Bootstrap 推拉产生奇怪的效果

Question

您好，我正在制作一个着陆页，在其下方的部分中，右图为左图，左图为文本，反之亦然。它几乎只在一定宽度上工作正常，但它不起作用。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
 .second-block {} .col-md-6 {
  padding-right: 0px;
  padding-left: 0px;
}
.tekst {
  padding: 25px 45px;
}
.tekst p {
  padding: 30px 0;
}
button {
  background: #ff0021;
  border-radius: 2em;
  padding: 15px 25px;
  border: none;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}
.footer {
  height: 60px;
  background: #292929;
  border-top: #ff0021 7px solid;
}
/* MEDIA QUERIES */

@media(max-width:1200px)  {}@media(max-width:1000px) {
  h2 {
    font-size: 15px;
  }
}
@media(min-width:991) and (max-width:1111) {
  h2 {
    font-size: 15px;
  }
}
@media(min-width:768px) and (max-width:990px) {}@media(max-width:768px) {
  .subline {
    padding-left: 35px;
    pad
  }
  @media(max-width:500px) {
    .subline {
      padding-left: 35px;
      padding-right: 35px;
    }
    p {
      font-size: 14px;
    }
  }

<section class="second-block" id="acties">
  <div class="row">
    <div class="col-md-6 col-sm-6 image">
      <img src="//placehold.it/600x400/?text=rockwerchter" width="100%" alt="Rock Werchter foto">
    </div>
    <div class="col-md-6 col-sm-6 tekst">
      <h2>WIN EEN WEEKEND ROCK WERCHTER VOOR VIJF PERSONEN, INCL. OVERNACHTING IN THE HIVE RESORT</h2>
      <p>De Morgen bezorgt u het weekend van uw leven. Doe mee en win gratis combitickets van Rock Werchter voor <strong>uzelf en vier vrienden</strong>. Logeren doet u het hele weekend in alle rust en comfort in <strong>The Hive Resort</strong>, met uw eigen tipi(tent), douches, een oergezellig café, wifi en echte toiletten.</p>
      <button type="button">Win tickets >></button>
    </div>
  </div>
</section>

<section class="second-block">
  <div class="row">
    <div class="col-md-6 col-sm-push-6 image">
      <img src="//placehold.it/600x400/?text=twclassic" width="100%" alt="TW Classic foto">
    </div>
    <div class="col-md-6 col-sm-pull-6 tekst">
      <h2>WIN DUOTICKETS VOOR TW CLASSIC</h2>
      <p>Met headliners als <strong>Bruce Springsteen & The E street Band, Lana Del Rey en Lionel Richie</strong> is de editie 2016 van TW Classic nu al een klassieker.</p>
      <button type="button">Win duotickets >></button>
    </div>
  </div>
</section>

Answer 1

错误在这里

<div class="col-md-6 col-sm-push-6 image">
<div class="col-md-6 col-sm-pull-6 tekst">

你必须使用

<div class="col-sm-6 col-sm-push-6 image">
<div class="col-sm-6 col-sm-pull-6 tekst">

而col-md-6 col-sm-6等同于col-sm-6。

查看结果:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
 .second-block {} .col-md-6 {
  padding-right: 0px;
  padding-left: 0px;
}
.tekst {
  padding: 25px 45px;
}
.tekst p {
  padding: 30px 0;
}
button {
  background: #ff0021;
  border-radius: 2em;
  padding: 15px 25px;
  border: none;
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}
.footer {
  height: 60px;
  background: #292929;
  border-top: #ff0021 7px solid;
}
/* MEDIA QUERIES */

@media(max-width:1200px)  {}@media(max-width:1000px) {
  h2 {
    font-size: 15px;
  }
}
@media(min-width:991) and (max-width:1111) {
  h2 {
    font-size: 15px;
  }
}
@media(min-width:768px) and (max-width:990px) {}@media(max-width:768px) {
  .subline {
    padding-left: 35px;
    pad
  }
  @media(max-width:500px) {
    .subline {
      padding-left: 35px;
      padding-right: 35px;
    }
    p {
      font-size: 14px;
    }
  }

<section class="second-block" id="acties">
  <div class="row">
    <div class="col-sm-6 image">
      <img src="//placehold.it/600x400/?text=rockwerchter" width="100%" alt="Rock Werchter foto">
    </div>
    <div class="col-sm-6 tekst">
      <h2>WIN EEN WEEKEND ROCK WERCHTER VOOR VIJF PERSONEN, INCL. OVERNACHTING IN THE HIVE RESORT</h2>
      <p>De Morgen bezorgt u het weekend van uw leven. Doe mee en win gratis combitickets van Rock Werchter voor <strong>uzelf en vier vrienden</strong>. Logeren doet u het hele weekend in alle rust en comfort in <strong>The Hive Resort</strong>, met uw eigen tipi(tent), douches, een oergezellig café, wifi en echte toiletten.</p>
      <button type="button">Win tickets >></button>
    </div>
  </div>
</section>

<section class="second-block">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6 image">
      <img src="//placehold.it/600x400/?text=twclassic" width="100%" alt="TW Classic foto">
    </div>
    <div class="col-sm-6 col-sm-pull-6 tekst">
      <h2>WIN DUOTICKETS VOOR TW CLASSIC</h2>
      <p>Met headliners als <strong>Bruce Springsteen & The E street Band, Lana Del Rey en Lionel Richie</strong> is de editie 2016 van TW Classic nu al een klassieker.</p>
      <button type="button">Win duotickets >></button>
    </div>
  </div>
</section>