Question

我有以下代码：

    <div class="container">
<div class="d-flex flex-row align-items-center">
        <div class="d-flex order-1 flex-column col-11 col-sm-2">
                <img src="im.png" alt="image" class="img-fluid">
        </div>

        <div class="d-flex order-0 flex-column col-sm-8 ">
                        <div><b style="color:red;">Title: </b>work</div>
                        <div><b style="color:red;">Author: </b>mark</div>
                       <div> <b style="color:red;">Country: </b>usa</div>
                       <div><b style="color:red;">city: </b>ny</div

</div>
</div>
</div>

我想要的是以下内容：

在手机屏幕以外的任何图像上，图像的顺序和跟随图像被交换，因此图像显示在右侧而不是右侧，其后的div出现在左侧
都以默认顺序显示，并且每个都显示整个宽度像col-12

如何执行此操作？我尝试使用grid和flex，但无法实现

注意：我是初学者，很抱歉您的天真的问题可能会出现

Answer 1

首先在<div class="d-flex flex-row align-items-center">而不是d-flex flex-row上使用 row 。否则，col- *类将无法正常工作。

其次，在包含img标签的div上使用order-sm-1类。

第三，删除col-11类，这不是必需的。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row align-items-center">
    <div class="d-flex order-sm-1 flex-column col-sm-2">
      <img src="im.png" alt="image" class="img-fluid">
    </div>

    <div class="d-flex flex-column col-sm-8">
      <div><b style="color:red;">Title: </b>work</div>
      <div><b style="color:red;">Author: </b>mark</div>
      <div> <b style="color:red;">Country: </b>usa</div>
      <div><b style="color:red;">city: </b>ny</div>
    </div>
  </div>
</div>

引导程序4如何更改弹性订单

1 个答案: