2

I have a list of 3 elements displayed as follows:

  • text - image
  • image - text
  • text -image

On mobile devices I want to have the text of the second element image before the image, but I am getting the opposite right now 

<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>
lofihelsinki
  • 2,491
  • 2
  • 23
  • 35
Ferdaous Ben Salha
  • 27
  • 1
  • 7

2 Answers2

4

What you need are the classes order-first order-md-2 for the second element text column:

The order-first class says: Make this column come first.

The order-md-2 class says: On screens that are md (medium) or larger make this column come in second place.

Here's the code: 

<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>
WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
0

You can utilize order https://getbootstrap.com/docs/4.0/layout/grid/#reordering

Your second element would look like this

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

This will make the "text sample" display first in small screens and the image display first in bigger screens.

EDIT: Fixed the example from v4 alpha to v4

lofihelsinki
  • 2,491
  • 2
  • 23
  • 35