CODEWITHSUNDEEP
twitter-bootstrapgrid
user3581073
user3581073

Reputation: 11

Bootstrap grid with special Order

i want create this order with Bootstrap grid in normal width [3][2][1] that shown in mobile view as

[1]
[2]
[3]

i couldn't use RTL Bootstrap because this destroy style of other jquery Element in my page thanx

Upvotes: 0

Views: 44

Answers (2)

Kieran Ryan
Kieran Ryan

Reputation: 591

Or you could use css flex with media queries (http://codepen.io/Kebten/pen/bdBPRe) :-)

.grid {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
}

@media (max-width:768px) {
  .grid {
    flex-direction: column; 
  }
}
<div class="grid">
  <div>
    [1]
  </div>
  <div>
    [2]
  </div>
  <div>
    [3]
  </div>
</div>

For info on other useful features of flex see https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

user3581073
user3581073

Reputation: 11

myself find answer

<div class='col-md-4 col-md-push-8 col-xs-12'>
[1]
</div>
<div class='col-md-4 col-md-offset-0 col-xs-12'>
[2]
</div>
<div class='col-md-4 col-md-pull-8 col-xs-12'>
[3]
</div>

Upvotes: 1

Related Questions