neon_pc neon_pc - 7 days ago 5
CSS Question

Switch two fields in Bootstrap 3

This is my mobile structure:

A
B
C


And I need change to this other on desktop:

C
A B


I have tried to pull and push but I am unable to make it work.

My base code actually is like this:

<div class="col-md-? col-xs-12 col-md-push-?">
<div class="col-md-6 col-xs-12">
A
</div>

<div class="col-md-6 col-xs-12">
B
</div>
</div>

<div class="col-md-? col-xs-12 col-md-pull-?">
C
</div>


What's the correct method to do this?

Answer

This can be done with css, using flexbox and media query as follows:

.wrapper{
  display:flex;
  flex-flow:row wrap;
}
.wrapper > *{
  flex: 1 100%;
}
@media only screen  and (min-width : 1224px) {
  .ab{
      order:2;
      flex: 1 auto;
    }
  .c{
      order:1;
    }
}
<div class="wrapper">
   <div class="ab">A</div> 
   <div class="ab">B</div> 
   <div class="c">C</div> 
</div>