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>

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

Answer 1

我偶然发现了相同的问题。由于所有现代浏览器都支持flexbox css，因此仅使用“ order”属性就足够了。在我的代码中，我倾向于使用Primefaces的普通Grid 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
    }
}

Answer 2

我从引导程序中找到了一些东西

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

primefaces反转列的显示顺序

2 个答案: