change col position in html

Question

i have this code

<div class="row">
<div class="col-xs-12">
  <div class="col-md-6">
    <div class="col-sm-7">
        Content B
    </div>
    <div class="col-sm-5">
        <img src="https://www.ipbrick.com/wp-content/uploads/2013/12/cloud.png" />
    </div>
  </div>
    <div class="col-md-6">
      <div class="col-sm-5">
          Content A
      </div>
      <div class="col-sm-7">
          Content C
      </div>
    </div>
</div>
</div>

and it's displayed

desktop

----b----|--d--|--a--|----c----

mobile

b

d

a

c

i want in mobile mode displaying

d

b

a

c

I have been read this article, but i still cannot understand, maybe someone can explain to me?

you can try this link here... https://getbootstrap.com/docs/4.0/layout/grid/#flex-order — usmany, Oct 04 '17 at 07:48

Awsme Sandy · Accepted Answer · 2017-10-09T09:49:17.390

Here is the code, i used flex to make it work. don't forget to put the code inside the media query @media all and (max-width:767px) or whatever you want

.col-row{
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    }
    /* use the below code under mobile media query */
     .col-b {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
.col-row img{
width: 30px;
}
.col-xs-12 {
    text-align: center;
}
  .col-row {
    align-items: center;
}
  .col-d {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
  @media all and (max-width:320px){
  .col-row {
    align-items: center;
}

  }

<div class="row">
<div class="col-xs-12">
  <div class="col-md-6 col-row">
    <div class="col-sm-7 col-b">
        Content B
    </div>
    <div class="col-sm-5 col-d">
        <img src="https://www.ipbrick.com/wp-content/uploads/2013/12/cloud.png" />
    </div>
  </div>
    <div class="col-md-6">
      <div class="col-sm-5">
          Content A
      </div>
      <div class="col-sm-7">
          Content C
      </div>
    </div>
</div>
</div>

your code is work but, when i using screen 320px i want images position in center, is it possible? — , Oct 09 '17 at 07:18
@BayuRizkiIsnaeniHidayatuloh wich images? you didn't mentioned any images in the code, if you want to make it centre, make sure the images doesn't have float:left or right, it should be display:inline-block , and add `text-align:center` to its parent. — Awsme Sandy, Oct 09 '17 at 07:28
sorry i forgot to set image in content D, the problem is in .col-row {display: flex} when i set {display: block} image position center but the sequence does not match — , Oct 09 '17 at 09:23
No need to put the div `display:block`, just set the content D to text align center — Awsme Sandy, Oct 09 '17 at 09:26
@BayuRizkiIsnaeniHidayatuloh check now, i added `justify-content:center` — Awsme Sandy, Oct 09 '17 at 09:51

score 0 · Answer 2 · answered Oct 04 '17 at 08:22

If you can swap around the B and D columns in the HTML and then use the bootstrap css classes to push and pull the columns to they are arranged differently on desktop and then go back to their 'normal' order on mobile:

<div class="row">
    <div class="col-xs-12">
        <div class="col-md-6">
            <div class="col-sm-5 col-sm-push-7">
                Content d
            </div>
            <div class="col-sm-7 col-sm-pull-5">
                Content B
            </div>
        </div>
        <div class="col-md-6">
            <div class="col-sm-5">
                Content A
            </div>
            <div class="col-sm-7">
                Content C
            </div>
        </div>
    </div>
</div>

change col position in html

2 Answers2