0

I am working with bootstrap and would like to have my columns reorder only in sm view. I know that bootstrap have pull and push method but I have problem with this.

Desktop

A | B | C | D

Tablet

A | D

B | C

Mobile

A | B

C | D

My code now:

<div class="container">
 <div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3">A</div>
  <div class="col-xs-6 col-sm-6 col-md-3">B</div>
  <div class="col-xs-6 col-sm-6 col-md-3">C</div>
  <div class="col-xs-6 col-sm-6 col-md-3">D</div>
 </div>
</div>
krystianj
  • 103
  • 2
  • 12
  • Before I try push and pull but It's good for 2 or 3 columns and simple layout. In my 4 column design push and pull does not meet expectations. – krystianj Aug 27 '16 at 12:50

2 Answers2

0

Krystian, pull and push methods of bootstrap are used to swap the column horizontally but not the vertically. As you wanted to swap them vertically so you need to go with CSS to achieve this.

There is similar question and I hope that this link will help you to meet your requirements.

Community
  • 1
  • 1
Hemant Kabra
  • 870
  • 9
  • 29
0

Thank you Hemant, but I found better solution. Using flex.

There is my working example :)

.row > div {
  border:solid 1px gray;
}
.row {
  display: flex;
  flex-flow: row wrap;
}
@media (min-width: 768px) and (max-width: 991px) {
  #col-a {
    order:1;
  }
  #col-b {
    order:3;
  }
  #col-c {
    order:2;
  }
  #col-d {
    order:4;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-a">A</div>
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-b">B</div>
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-c">C</div>
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-d">D</div>
  </div>
</div>
krystianj
  • 103
  • 2
  • 12