Bring text to top of page on mobile device - html

Question

I have my layout done like this
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>WiFi via Facebook</h2><span class="border"></span>
<p>Erbjud dina gäster & besökare fri WiFi genom vår WiFi tjänst. De letar helt enkelt upp ert Nätverk, Ansluter & då kommer er Facebooksida upp och ger besökaren möjlighet att Checka in på er Facebook sida för att få tillgång till nätverket. Perfekt Marknadsföring för ditt företag</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/1.jpg" style="margin: auto;"></div>
</div>
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/2.jpg" style="margin: auto;"></div>
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>Google Streetview</h2><span class="border"></span>
<p>Visa ditt företag från insidan med en virtuell rundtur i 360°. Perfekt för Restauranger & Butiker. Allt publiceras under din Google My Business och ger dina kunder en chans att gå in Virtuellt hos er. Vi utför även Filmning & Fotning i 360° där din fantasi sätter gränserna</p>
</div>
</div>
It works fine with text on the left then an image on the right and then the next row we have text on the right and image on the left but when it goes to mobile I want the text to be above the picture on the second row because right now on mobile devices it goes :
Text
Image
Image
Text
And I want
Text
Image
Text
Image
I was wondering how to do this ?
Thanks

Answer 1

You can do it like this with the Flexbox:
#media screen and (max-width: 480px) { /* adjust to your needs */
.row:not(:first-child) {
display: flex;
flex-direction: column;
}
.row:not(:first-child) > .shadowimg {
order: 2;
}
}
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>WiFi via Facebook</h2><span class="border"></span>
<p>Erbjud dina gäster & besökare fri WiFi genom vår WiFi tjänst. De letar helt enkelt upp ert Nätverk, Ansluter & då kommer er Facebooksida upp och ger besökaren möjlighet att Checka in på er Facebook sida för att få tillgång till nätverket. Perfekt Marknadsföring för ditt företag</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/1.jpg" style="margin: auto;"></div>
</div>
<div class="row newtryh2">
<div class="col-xs-12 col-sm-6 col-md-6 shadowimg"><img class="img-responsive" src="Images/2.jpg" style="margin: auto;"></div>
<div class="col-xs-12 col-sm-6 col-md-6 middlethat">
<h2>Google Streetview</h2><span class="border"></span>
<p>Visa ditt företag från insidan med en virtuell rundtur i 360°. Perfekt för Restauranger & Butiker. Allt publiceras under din Google My Business och ger dina kunder en chans att gå in Virtuellt hos er. Vi utför även Filmning & Fotning i 360° där din fantasi sätter gränserna</p>
</div>
</div>

Answer 2

A only-css way to do this is Flexbox.
On your "newtryh2" containers, set the display:flex attribute.
Then with flex-direction:column and flex-direction:column-reverse on mobile you can change the order of the contained blocks.