How to change image position in cell or xs mode in boostrap 4?

Question

how are you? I have the following situation. I need that when I switch to cellular xs mode, the image is displayed to the right of the title. for example, for the title it is col-xs-9 and the image is col-xs-3. Previously I did it in boostrap3, which the example solution is the following:

<div class="col-xs-4 col-sm-3 pull-right col-md-12">
   <img src="...." alt="" class="img-responsive" style="max-width:100px;" />
<div>

<header class="col-xs-8 col-sm-9 col-md-12">
        <a href="#">
            <h2>Title</h2>
        </a>
</header>

Giving as a solution the pull-right class,

But in this case, for boostrap4, I have tried with the float-right and the float-sm-right replacing the pull-right, but it doesn't work. How could I fix it? Could there be any examples?

I show how I want the image to look in relation to the text.

picture mode pc or big screen

xs mode image or cellular

Answer 1

I've tried to recreate your situation in both versions, and I've used order keyword for positioning of order of cells in row.

here is in version 3

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


<div class="col-xs-9 pull-right col-sm-12">
  <img src="https://placehold.it/200x200" alt="" class="img-responsive" style="max-width:100px;" />
</div>

<header class="col-xs-3 col-sm-12">
  <a href="#">
    <h2>Title</h2>
  </a>
</header>

and this is version 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<div class="container">
  <div class="row">
    <div class="col-9 order-2">
      <img src="https://placehold.it/200x200" alt="" class="img-responsive" style="max-width:100px;" />
    </div>

    <header class="col-3 order-1">
      <a href="#">
        <h2>Title</h2>
      </a>
    </header>
  </div>
</div>