Reorder Columns with Bootstrap and/or Bootstrap flex

Question

Currently i have this:

                <div class="row">
                    <div class="col-md-6">
                        <p>A long borring text</p>
                    </div>

                    <div class="col-md-6">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>

on mobile this results in order #1 text #2 photo, but i want the photo to be #1 and text #2 in order.

score 0 · Answer 1 · answered Jul 02 '17 at 06:35

HTML

<div class="row flex reverse-column">
    <div class="col-md-6">
        <p>A long borring text</p>
    </div>

    <div class="col-md-6">
        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
    </div>               
</div>

CSS

  @media( max-width: 767px ){

    .flex{
      display: flex;
    }
    .flex.reverse-column{
      flex-direction: column-reverse;
    }
  }

score 0 · Answer 2 · answered Jul 02 '17 at 06:58

Add two id in your two div's and you can flip div using jquery but here i am using css only . hope it will do your job .

  <style>
  /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

.row   { display: table; }
#first  { display: table-footer-group; }
#second { display: table-header-group; }
}

</style>
                <div class="row" >
                    <div class="col-md-6" id ="first">
                        <p>A long borring text</p>
                    </div>

                    <div class="col-md-6" id="second">
                        <img class="img-fluid wow fadeIn" data-wow-delay="0.1s" src="superimage.jpg" alt="" />
                    </div>               
                </div>

Reorder Columns with Bootstrap and/or Bootstrap flex

2 Answers2