Bootstrap push and pull give weird effect - html

Question

Hello im making a landingpoage with an image right and text left and visa versa in the section underneat it. It almost works fine only on a certain width it doesnt work.
#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

The error is here
<div class="col-md-6 col-sm-push-6 image">
<div class="col-md-6 col-sm-pull-6 tekst">
You have to use
<div class="col-sm-6 col-sm-push-6 image">
<div class="col-sm-6 col-sm-pull-6 tekst">
And col-md-6 col-sm-6 is equivalent to col-sm-6.
Check the result:
#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>