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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.