how to reorder a columns in Flex CSS?



  • 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!



  • 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'


  • Admin

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