Ordering columns with bootstrap 4 on mobile devices - html

Question

These ordering classes are not working. What i want, is this order on mobile and tablet:
First section:
text
img
Second section:
text
img
If I now view this on mobile, the 2 image is under each other and that's not good.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-sm-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>

Answer 1

If you want the image to appear beside the text in small (sm) and medium (md) change your code and use only sm. It will apply for sm and md. Remember that you have 12 cols, so if you use sm-12, then you are filling the 12 cols.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-6 order-sm-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>

Answer 2

You need to use class "order-N" for mobiles and "order-md-N" for resolutions 768px+
So:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>
Also, you can use class "my-5" instead of "mt-5 mb-5".