Question

我有一个包含3个元素的列表，如下所示：

text - image
图片 - 文字
text -image

在移动设备上我希望在图像之前有第二个元素图像的文本，但我现在正好相反

<div class="container">

  <div class="sub-title">
    <div>simpleTextDynamicIndoorNavigationTitle</div>
  </div>

  <div class="row">

    <div class="col-md-6">
      <div>text sample</div>
    </div>
    <div class="col-md-6">
      <img src="assets/img/img1.png">
    </div>

  </div>

  <div class="row">

    <div class="col-md-6">
      <img src="assets/img/img2.png">
    </div>
    <div class="col-md-6">
      <div>text sample</div>
    </div>

  </div>

  <div class="sub-title" id="use-cases-title">
    <div>simpleTextUseCasesTitle</div>
  </div>

  <div class="row" >

    <div class="col-md-6">
      <div>text sample</div>
    </div>
    <div class="col-md-6">
      <img src="assets/img/img3.png">
    </div>

  </div>

</div>

Answer 1

您需要的是第二个元素文本列的类order-first order-md-2：

order-first课程说：将此列放在第一位。

order-md-2类说：在md（中等）或更大的屏幕上，此栏目排在第二位。

以下是代码：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">

    <div class="sub-title">
        <div>simpleTextDynamicIndoorNavigationTitle</div>
    </div>
    
    <div class="row">
        <div class="col-md-6">
            <div>text sample</div>
        </div>
        <div class="col-md-6">
            <img src="https://picsum.photos/57">
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <img src="https://picsum.photos/56">
        </div>
        <div class="col-md-6 order-first order-md-2">
            <div>Second element text</div>
        </div>
    </div>
    
    <div class="sub-title" id="use-cases-title">
        <div>simpleTextUseCasesTitle</div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div>text sample</div>
        </div>
        <div class="col-md-6">
            <img src="https://picsum.photos/55">
        </div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用订单 https://getbootstrap.com/docs/4.0/layout/grid/#reordering

你的第二个元素看起来像这样

  <div class="row">

    <div class="col-md-6 order-md-2">
        <div>text sample</div>
    </div>
    <div class="col-md-6 order-md-1">
        <img src="assets/img/img2.png">
    </div>

  </div>

这将使＆＃34;文本样本＆＃34;首先在小屏幕上显示，图像首先在更大的屏幕中显示。

编辑：修正了从v4 alpha到v4的示例

bootstrap 4中元素的逆序

2 个答案: