如何在单元模式或xs模式下更改启动4中的图像位置？

Question

你好吗？我有以下情况。我需要的是当我切换到手机xs模式时，图像显示在标题的右边。例如，标题为col xs-9，图像为col xs-3。之前我用的是boostrap3，示例解决方案如下所示：

<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>

作为解决方案给出了pull-right类，

但在本例中，对于boostrap4，我尝试了用float-right和float-sm-right替换pull-right，但它不起作用。我怎么才能修复它呢？有没有什么例子呢？

我展示了我想要的图像相对于文本的外观。

图片模式pc或大屏幕

​

​

xs模式图像或蜂窝

​

​

Answer 1

我已经尝试在两个版本中重现您的情况，并且我使用order关键字来定位行中单元格的顺序。

下面是版本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>

​

这是版本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>

​