primefaces reverse the columns display order

Question

I have to create 2 columns with Primefaces and for this I wrote this code:

<div class="ui-fluid">
    <p:panelGrid 
        columns="2"
        columnClasses="
            ui-g-12 ui-md-6 ui-l-6 ui-lg-3, 
            ui-g-12 ui-md-6 ui-l-6 ui-lg-9" 
        layout="grid" 
        styleClass="ui-panelgrid-blank ui-fluid ">

        <h:outputLabel>
            Column 1 content
        </h:outputLabel>

        <h:outputLabel>
            Column 2 content
       </h:outputLabel>
    </p:panelGrid> 
</div>

this work fine if i want to have column 1 above the column 2 in the application. My issue is to display the right column on top and the left column bottom. I didn't find how to solve this issue.

Answer 1

I found something from bootstrap :

@media (max-width: 640px) {
      .order-md-first {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
      }
      .order-md-last {
        -webkit-box-ordinal-group: 14;
        -ms-flex-order: 13;
        order: 13;
      }
      .flex-column-reverse {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
        flex-direction: column-reverse !important;
      }
  }

And i changed the panelGrid by adding those styles :

<p:panelGrid 
    columns="2"
     columnClasses="
         ui-g-12 ui-md-6 ui-l-6 ui-lg-3 order-md-last, 
         ui-g-12 ui-md-6 ui-l-6 ui-lg-9 order-md-first" 
     layout="grid" 
     styleClass="ui-panelgrid-blank ui-fluid ">