primefaces 反转列显示顺序

Question

我必须使用 Primefaces 创建 2 列，为此我编写了以下代码：

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

如果我想在应用程序中将第 1 列置于第 2 列之上，此方法可以正常工作。我的问题是在顶部显示右列，在底部显示左列。我没有找到解决这个问题的方法。

Answer 1

我从 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;
      }
  }

我通过添加这些样式更改了 panelGrid：

<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 ">

Answer 2

我偶然发现了与 primefaces 相同的问题。由于所有现代浏览器都支持 flexbox css，因此仅使用“顺序”属性就足够了。在我的代码中，我倾向于使用 Primefaces 中的普通网格 CSS，但这只是个人喜好问题。

此外，如果您想响应式更改顺序，则必须使用经典的@media“hack”：

XHTML:

 <div class="ui-g">
     <div class="ui-g-12 ui-md-6 ui-l-6 ui-lg-3" id="column1">
     </div>
     
     <div class="ui-g-12 ui-md-6 ui-l-6 ui-lg-9" id="column2">
     </div>
 </div>

CSS:

    /* Primefaces ui-sm*/
@media only screen and (max-width: 640px) {
    #column2 {
        order: 0
    }

    #column1 {
        order: 1
    }
}

/* Primefaces ui-md*/
@media only screen and (min-width: 641px) {
    #mcolumn2 {
        order: 0
    }

    #column1 {
        order: 1
    }
}

/* Primefaces ui-lg*/
@media only screen and (min-width: 1025px) {
    #column2 {
        order: 1
    }

    #column1 {
        order: 0
    }
}

/* Primefaces ui-xl and bigger*/
@media only screen and (min-width: 1441px) {
    #column2 {
        order: 1
    }

    #column1 {
        order: 0
    }
}

primefaces 反转列显示顺序

primefaces reverse the columns display order

primefaces