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

问题描述

你好吗？ 我有以下情况。我需要切换到蜂窝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>

提供右上角类作为解决方案，

但是在这种情况下，对于boostrap4，我尝试用右浮点和sm浮点代替右浮点，但是它不起作用。我该如何解决？有什么例子吗？

我展示了我希望图像相对于文本的外观。

图片模式PC或大屏幕

xs模式图片或移动电话

解决方法

我试图在两个版本中重新创建您的情况，并且使用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>