how to reorder a columns in Flex CSS?

[jeimz173]

Hi guys, i have this row which has many columns and what i want to achieve is… the first two column will reorder if i resize my browser or into any small screen like:

from big screen it will be like:

 <div class="row">
  <div class="col-sm-6">first</div>
  <div class="col-sm-6">second</div>
  <div class="col-sm-6">third</div>
  <div class="col-sm-6">fourth</div>
  <div class="col-sm-6">fifth</div>
</div>

but then in smaller screen:

<div class="row">
<div class="col-sm-6">second</div>
  <div class="col-sm-6">first</div>
  <div class="col-sm-6">third</div>
  <div class="col-sm-6">fourth</div>
  <div class="col-sm-6">fifth</div>
</div>

in bootstrap, there is a class like push and pull for columns? do we have something like that… thank you!

[eleina]

Hey! Maybe this will help you: http://quasar-framework.org/components/flex-css.html#Order
You can set the order by adding a class like .order-first or add style='order: 2'

[rstoenescu]

Add a media query in your CSS, and specify different orders through CSS order prop.